jquery-animate - backgroundImageを使用した.hoverの無限ループ

Question

  <script type="text/javascript">
    $(document).ready(function() {

      $('.istina').hover(function() {
        animate_loop = function() {
          $(this).css('backgroundImage', 'url(<?php print $base_path . $directory ?>/img/istina-hover.png)').animate({backgroundImage: 'url(/sites/all/themes/ruh/img/istina.png)'}, 500, function() { animate_loop(); } );
      }, function() {
          $(this).css('backgroundImage', 'url(<?php print $base_path . $directory ?>/img/istina.png)');
        }
        }
      )
    });

ホバー時に背景画像を変更したいクラスとのリンクが<a class="istina">some text</a>あり、ホバー中に istina.png と istina-hover.png を切り替えたい

ありがとう！

Answer 1

これを行うのに JavaScript は必要ありません。CSS 駆動型にすることができます...

html:

<a class="istina">some text</a>

CSS

#istina {  
background-image : url(istina.png); 
}

#istina :hover { 
background-image : url(istina-hover.png); 
}