Why does not change the background?

$(document).ready(function() { (function bg_change() { $('.button_change') .animate({ opacity: 0 }, 'slow', function() { $(this) .css({ 'background-image': 'url(/img/button/btn_hover.jpg)' }) .animate({ opacity: 1 }); }).toggle(1000).animate({ opacity: 0 }, 'slow', function() $(this) .css({ 'background-image': 'url(/img/button/btn.jpg)' }) .animate({ opacity: 1 }); })(); bg_change(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="button_change"></div>

  • brackets check - qzavyer
  • @qzavyer, parentheses, improper use of the animate () function, unexpected toggle (), which hides everything, there’s a whole thriller, not just brackets :) - MasterAlex

1 answer 1

something strange here. If you correct the formatting, brackets and remove unnecessary toggle, you get something like this:

 <script type="text/javascript"> $(document).ready( function() { var bg_change = function (){ $('.button_change') .animate({opacity: 0}, 'slow', function() { $(this) .css({'background-color': 'black'}) //.animate({opacity: 1}); }) .animate({opacity: 1}, 'slow', function(){ $(this) .css({'background-color': 'red'}) //.animate({opacity: 1}); }); }; bg_change(); }); </script>

not sure the truth is that this is what you wanted ..

  • Thank. I have already found a solution, here is my code, which can be useful: <div class = "button_change"> </ div> <script type = "text / javascript"> $ (document) .ready (function () {(function bg_change () {$ ('. button_change') .animate ('1500', function () {$ (this) .css ({'background-image': 'url (/img/button/btn_hover.jpg)'})}) ; $ ('. button_change') .animate ('1500', function () {$ (this) .css ({'background-image': 'url (/img/button/btn.jpg)', 'z- index ':' 2 '})}); bg_change ();}) ();}); </ script> - BonBonSlick