jQuery Slider事件不會觸發

從我所認爲的將是一個相當簡單的滑塊代碼塊，事件根本不會觸發，它讓我瘋狂。不知道我錯過了什麼，所以任何幫助都會很大。jQuery Slider事件不會觸發

麻煩的頁面可以在這裏找到... http://ardaneworldwide.com/home2.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Ardane Worldwide</title> 
     <link rel="stylesheet" type="text/css" href="slider_entry/style.css"/> 
    </head> 
    <body> 
     <div class="wrapper"> 
      <img src="/slider_entry/header-bg.jpg" /> 
      <div id="unlock-bottom"> 
       <div id="slide-to-unlock"></div> 
       <div id="unlock-slider-wrapper"> 
        <div id="unlock-slider"> 
         <div id="unlock-handle"></div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script type="text/javascript" src="/slider_entry/ui.core-1.5.3.js"></script> 
     <script type="text/javascript" src="/slider_entry/ui.slider.js"></script> 
     <script type="text/javascript" src="/slider_entry/iphone-unlock.js"></script> 
    </body> 
</html>

$(document).ready(function(){ 
    $("#unlock-slider").slider({ 
     handle: "#unlock-handle", 
     animate: true, 
     slide: function(e,ui){ 
      $("#slide-to-unlock").css("opacity", 1-(parseInt($("#unlock-handle").css("left"))/120)); 
     }, 
     stop: function(e,ui){ 
      if($("#unlock-handle").position().left == 205){ 
       window.location="index.php"; 
      } 
      else { 
       $("#unlock-handle").animate({left: 0}, 200); 
       $("#slide-to-unlock").animate({opacity: 1}, 200); 
      } 
     } 
    }); 
});

感謝。

來源

2012-12-05 Ryan Prentiss

出於某種原因，滑動和停止事件未被觸發。它看起來像你可能會使用舊版本的jQuery UI和滑塊，嘗試更新到最新版本。 – Shmiddty

在這裏看到：http://jsfiddle.net/vdxWm/

要獲得幻燈片和停止功能解僱，你需要更新到最新版本的jQuery用戶界面/滑塊。

滑塊的最新版本不允許你重寫句柄元素，所以你可以選擇這種樣式，或者使用一些代碼來調整自定義句柄的位置，正如我在下面所做的那樣。

$("#unlock-slider").slider({ 
    animate: true, 
    slide: function(e,ui){ 
     var han = $("#unlock-handle"), 
      con = $("#unlock-slider"), 
      left = (con.width() - han.width())/con.width() * ui.value + '%'; 

     han.css('left', left); 

     $("#slide-to-unlock").css("opacity", 1-(parseInt($("#unlock-handle").css("left"))/120)); 
    }, 
    stop: function(e,ui){ 
     if($("#unlock-handle").position().left == 205){ 
      //window.location="index.php"; 
      console.log('done'); 
     } 
     else { 
      $("#unlock-handle").animate({left: 0}, 200); 
      $("#slide-to-unlock").animate({opacity: 1}, 200); 
     } 
    } 

});

來源

2012-12-05 23:57:58 Shmiddty

太棒了！非常感謝你！ –

jQuery Slider事件不會觸發

回答

相關問題