0

リンクをクリックするまで非表示になっている div があり、表示に切り替わります。非表示の div 内でマウスの動きを前後に楽にするスライダーを実装するために、より大きな javascript を実装するまで、私のコードは正常に機能していました。私の質問は、これら 2 つのコード (古いコードと新しいコード) を効果的に組み合わせるにはどうすればよいかということです。現時点では、div が非表示になっていない場合にのみ、すべてを正しく機能させることができます。

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

スライダーのJavaScript

    <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>
4

1 に答える 1

0

私の知る限り、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 をクリックして非表示を解除すると、スライダーを実行することです。

意味がある場合はこれを試してください

于 2012-09-19T03:02:33.607 に答える