Javascript jQuery滑块事件不是'；t射击_Javascript_Jquery_Jquery Ui_Jquery Plugins

Javascript jQuery滑块事件不是'；t射击

javascript jquery jquery-ui jquery-plugins

Javascript jQuery滑块事件不是'；t射击,javascript,jquery,jquery-ui,jquery-plugins,Javascript,Jquery,Jquery Ui,Jquery Plugins,从我假设的一段相当简单的滑动代码来看，事件根本不会触发，这让我发疯。不知道我错过了什么，所以任何帮助都是伟大的麻烦的页面可以在这里找到 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">

从我假设的一段相当简单的滑动代码来看，事件根本不会触发，这让我发疯。不知道我错过了什么，所以任何帮助都是伟大的

麻烦的页面可以在这里找到

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>

谢谢。

请看这里：

要启动slide和stop函数，需要更新到jqueryui/slider的最新版本

slider的最新版本不允许覆盖handle元素，因此您可以根据该元素设置样式，或者使用一些代码来调整自定义控制柄的位置，正如我在下面所做的那样

$("#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 );
        }
    }

});

由于某些原因，没有触发滑动和停止事件。看起来您可能正在使用较旧版本的jquery ui和slider，请尝试更新到最新版本。太棒了！非常感谢你！

$("#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 );
        }
    }

});