jQuery Multiple Toggles行为不端？

Question

我有3个按钮，在悬停时它们显示和图像，然后在点击它们加载div但是，当我在它们之间点击时，div有时无法加载，它似乎变得混乱，互相打开和关闭。

我做了一个粗略的fiddle来解释......

//Button One
    $("li.chem-flow a").hover(function () {

              $("img.chem-flow-detail").fadeToggle( "slow", "linear" );

             })

    $("li.chem-flow a").click(function () {

              $(".system-full-top").fadeToggle( "slow", "linear" );

             })      


    //Button Two         
    $("li.power-boost a").hover(function () {

              $("img.power-boost-detail").fadeToggle( "slow", "linear" );

            })

     $("li.power-boost a").click(function () {

              $(".system-full-top").fadeToggle( "slow", "linear" );

             })         


     //Button Three         
     $("li.power-box a").hover(function () {

              $("img.power-box-detail").fadeToggle( "slow", "linear" );

            }) 

     $("li.power-box a").click(function () {

              $(".system-full-top").fadeToggle( "slow", "linear" );

             })  

Answer 1

使用前置.fadeToggle()更新您的所有.stop(true, true)：

.stop(true, true).fadeToggle("slow", "linear");

所以例如：

$("li.chem-flow a").hover(function () {
   $("img.chem-flow-detail").stop(true, true).fadeToggle("slow", "linear");
});

Demo fiddle