jQuery：延遲/ setTimeOut爲addClass和removeClass

Question

我正在使用以下功能來控制一些社交網絡圖標的翻轉效果。該函數的大部分（不包括addClass/removeClass部分）完美地工作，但我需要包含addClass/removeClass部分，因爲默認圖標狀態會滲入圖標邊緣的懸停狀態。我遇到的問題是我無法完全弄清楚如何正確地延遲函數的addClass/removeClass部分，並且可以使用一些幫助來做到這一點。我需要能夠將函數的那部分減慢大約與函數的主要部分相同的量。

$(function() { 
    $("#fb span, #yt span, #tw span, #sc span, #it span, #my span").css({ 
     opacity: "0" 
    }).mouseover(function() { 
     $(this).stop().animate({ 
      opacity: "1" 
     }, { 
      duration: 250 
     }) 
     $(this).parent().addClass("nobg"); 
    }).mouseout(function() { 
     $(this).stop().animate({ 
      opacity: "0" 
     }, { 
      duration: 250 
     }) 
     $(this).parent().addClass("nobg"); 
    }) 
}); 

供您參考，我爲此使用HTML的樣子：

<ul> 
    <li><a href="#" target="_blank"><div id="fb">Facebook<span></span></div></a></li> 
    <li><a href="#" target="_blank"><div id="yt">YouTube<span></span></div></a></li> 
    <li><a href="#" target="_blank"><div id="tw">Twitter<span></span></div></a></li> 
    <li><a href="#" target="_blank"><div id="my">myspace<span></span></div></a></li> 
    <li><a href="#" target="_blank"><div id="sc">Soundcloud<span></span></div></a></li> 
    <li><a href="#" target="blank"><div id="it">iTunes<span></span></div></a></li> 
</ul> 

預先感謝任何幫助，您可以提供！

Answer 1

jQuery animate()有一個回調函數，使用它會延遲添加類直到動畫完成。另一方面，你爲什麼要兩次添加同一個班級？

$(function() { 
    $("#fb span, #yt span, #tw span, #sc span, #it span, #my span") 
     .css('opacity', '0') 
     .on({ 
      mouseenter: function() { 
       $(this).stop().animate({opacity: 1}, 250, function() { 
        $(this).parent().addClass("nobg"); 
       }); 
      }, 
      mouseleave: function() { 
       $(this).stop().animate({opacity: 0}, 250, function() { 
        $(this).parent().addClass("nobg"); 
       }); 
      } 
    }); 
});​ 

Answer 2

你的CSS實現有點小問題，但是對你的jQuery稍作修改，這可能就是你要找的東西？

http://jsfiddle.net/dboots/6zDhE/

$(function() { 
    //-- init link span opacity to 0 
    $("#fb span, #yt span, #tw span, #sc span, #it span, #my span").css({ 
     opacity: "0" 
    }); 

    //-- add mouseover/mouseout event handler to the span parents 
    $('#fb, #yt, #tw, #sc, #it, #my').mouseover(function() { 

     //-- find the current span element we are working with. 
     var el = $(this).find('span'); 

     el.stop().animate({ 
      opacity: "1" 
     }, { 
      duration: 250 
     }) 
     el.parent().addClass("nobg"); 
    }).mouseout(function() { 
     var el = $(this).find('span'); 
     el.stop().animate({ 
      opacity: "0" 
     }, { 
      duration: 250 
     }) 
     el.parent().addClass("nobg"); 
    }) 
});​ 

在問候你的CSS是有點過，它會更容易一點，以保持如果添加類到父的div和引用他們的方式。

例如：

http://jsfiddle.net/dboots/6zDhE/1/

HTML：

<ul> 
    <li><a href="#" target="_blank"><div class="social_link" id="fb">Facebook<span>1</span></div></a></li> 
    <li><a href="#" target="_blank"><div class="social_link" id="yt">YouTube<span>2</span></div></a></li> 
    <li><a href="#" target="_blank"><div class="social_link" id="tw">Twitter<span>3</span></div></a></li> 
    <li><a href="#" target="_blank"><div class="social_link" id="my">myspace<span>4</span></div></a></li> 
    <li><a href="#" target="_blank"><div class="social_link" id="sc">Soundcloud<span></span></div></a></li> 
    <li><a href="#" target="_blank"><div class="social_link" id="it">iTunes<span></span></div></a></li> 
</ul>​ 

JS：

$(function() { 
    //-- This should probably be accomplished via CSS instead? 
    //-- ex.) .social_link span { display: none; } 

    $('.social_link span').css({ 
     opacity: "0" 
    }); 

    $('.social_link').mouseover(function() { 
     var el = $(this).find('span'); 
     el.stop().animate({ 
      opacity: "1" 
     }, { 
      duration: 250 
     }) 
     el.parent().addClass("nobg"); 
    }).mouseout(function() { 
     var el = $(this).find('span'); 
     el.stop().animate({ 
      opacity: "0" 
     }, { 
      duration: 250 
     }) 
     el.parent().addClass("nobg"); 
    }) 
});​