Jquery fade在鼠標懸停

Question

我正在使用一個名爲任何滑塊的插件，並試圖使控件在4秒後淡出（這是工作），然後在mouseover（不工作）時將不透明度更改回1。這是我迄今爲止...我做錯了什麼？

$(slider.$controls).mouseover(function() 
slider.$controls.fadeTo(400, 1.0); 
}); 

$(function() { 
    var fadeTime = 400, 
     fadeDelay = 4000, 
     timer, hideControls = function (slider) { 
      clearTimeout(timer); 
      setTimeout(function() { 
       slider.$controls.fadeTo(fadeTime, 0.3); 
       $('.tooltip').fadeOut(fadeTime); 
      }, fadeDelay); 
     }; 
}); 

Answer 1

你用前人的精力slider.controls.fadeTo

$(slider.controls).mouseover(function() 

    $(this).fadeTo(400, 1.0); 

}); 

Answer 2

更換每slider.$controls.fadeTo您在線2.如果你有一個語法錯誤

slider.$controls.fadeTo... 

你應該有

$(this).fadeTo... 

，因爲一旦你輸入了第1行的匿名函數，this對象現在引用你正在執行的代碼的DOM元素，這是slider.controls代表的元素。

Answer 3

首先您使用slider.controls來定位控制元素，然後使用slider.$controls來定位相同的元素。我認爲你需要決定它是哪一個。

此外，回調函數裏面，你可以使用this作爲元素的引用已對其有觸發事件：

$(slider.controls).bind('mouseover', function() { 
    $(this)... 
}); 

否則，如果你想淡入出所有控制在同一時間，那麼你只需要弄清楚你是否需要使用slider.$controls或slider.controls。

UPDATE

我看你已經改變了你的問題，你現在正在使用slider.$controls兩次。你應該把你的mouseover代碼document.ready事件處理中，所以你知道的DOM元素：

$(function() { 

    slider.$controls.mouseover(function() 
     slider.$controls.fadeTo(400, 1.0); 
    }); 

    var fadeTime = 400, 
     fadeDelay = 4000, 
     timer, hideControls = function (slider) { 
      clearTimeout(timer); 
      setTimeout(function() { 
       slider.$controls.fadeTo(fadeTime, 0.3); 
       $('.tooltip').fadeOut(fadeTime); 
      }, fadeDelay); 
     }; 

而且我注意到，你在一個jQuery包裹slider.$controls對象中的第一次，但不是第二，一定要如果slider.$controls還不是jQuery對象（很多時候開發人員把$作爲變量名的第一個字符來表示它是一個jQuery對象）。