Question

我有一个隐藏的div，直到点击链接然后切换到视图。我的代码工作正常，直到我实现了一个更大的javascript来实现一个滑块，在隐藏的div中鼠标移动来回缓和。我的问题是如何有效地结合这两个代码（旧的和新的）。现在，如果不隐藏div，我只能使一切正常工作。

$("#media").click(function () {
     $("#mediadetails").toggle(2000, function() {
});
$("#mediaclose").click(function() {
     $("#mediadetails").toggle(2000);
})

javascript for slider

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$mediadetails = $("#mediadetails");
$thumbScroller = $("#thumbScroller");
$thumbScroller_container = $("#thumbScroller .container");
$thumbScroller_content = $("#thumbScroller .content");
$thumbScroller_thumb = $("#thumbScroller .thumb");

$(window).load(function() {

    sliderLeft = $thumbScroller_container.position().left;
    padding = $mediadetails.css("paddingRight").replace("px", "");
    sliderWidth = $(window).width() - padding;
    $thumbScroller.css("width", sliderWidth);
    var totalContent = 0;

    //get content width
    $thumbScroller_content.each(function() {
        var $this = $(this);
        totalContent += $this.innerWidth();
        $thumbScroller_container.css("width", totalContent);
    });

    //content scrolling
    $thumbScroller.mousemove(function(e) {
        if ($thumbScroller_container.width() > sliderWidth) {
            var mouseCoords = (e.pageX - this.offsetLeft);
            var mousePercentX = mouseCoords / sliderWidth;
            var destX = -(((totalContent - (sliderWidth)) - sliderWidth) * (mousePercentX));
            var thePosA = mouseCoords - destX;
            var thePosB = destX - mouseCoords;
            var animSpeed = 900; //ease amount
            var easeType = "easeOutCirc";
            if (mouseCoords > destX) {
                //$thumbScroller_container.css("left",-thePosA);
                //without easing
                $thumbScroller_container.stop().animate({
                    left: -thePosA
                }, animSpeed, easeType);

                //with easing
            } else if (mouseCoords < destX) {
                //$thumbScroller_container.css("left",thePosB); //without easing
                $thumbScroller_container.stop().animate({
                    left: thePosB
                }, animSpeed, easeType);

                //with easing
            } else {
                $thumbScroller_container.stop();
            }
        }
    });

    //thumbnails mouse over/out & initial state
    var fadeSpeed = 200;

    $thumbScroller_thumb.each(function() {
        var $this = $(this);
        $this.fadeTo(fadeSpeed, 0.4);
    });

    $thumbScroller_thumb.hover(

    function() { //mouse over
        var $this = $(this);
        $this.fadeTo(fadeSpeed, 1);
    }, function() { //mouse out
        var $this = $(this);
        $this.fadeTo(fadeSpeed, 0.4);
    });
});

//browser resize
$(window).resize(function() {
    //$thumbScroller_container.css("left",sliderLeft); //without easing
    $thumbScroller_container.stop().animate({
        left: sliderLeft
    }, 400, "easeOutCirc"); //with easing
    var newWidth = $(window).width() - padding;
    $thumbScroller.css("width", newWidth);
    sliderWidth = newWidth;
});
    </script>

Answer 1

据我所知，JavaScript不适用于隐藏内容。这就是为什么它适用于未隐藏的内容。所以我们需要在你的大脚本发生之前取消隐藏div。

好的尝试一下，将较大的脚本$(window).load(function() {//your script});更改为任何函数，例如function my_slider(){//your script}（这将禁用文档加载时执行的滑块）并在您的切换脚本中调用该函数，如

$("#media").click(function () {
     $("#mediadetails").toggle(2000, function() {
my_slider();
});
$("#mediaclose").click(function() {
     $("#mediadetails").toggle(2000);
})

我们所做的就是调用滑块onload我们执行它，一旦你点击隐藏的div来取消隐藏。

如果对你有意义的话，试试这个

Jquery切换不适用于滑块

1 个答案: