Question

我有一个名为#slider的div，宽度为400％，overflow-x设置为隐藏。 #slider DIV以25％填充4个div（这样每个div都可以伸展100％的DOM）。一旦页面加载，我立即向左移动div -100％，以便div可以从页面加载中左右移动。

我正在设置#slider DIV的动画，左右移动它以使用简单的方式将每个子DIV移动到DOM中的视图中：

$(".goright").click(function(){
$("#slider").animate({left:'-=100%'}, 400);
});

和

 $(".goleft").click(function(){
 $("#slider").animate({left:'+=100%'}, 400);
 });

分别

哪作得非常好。

然而，一旦#slider的位置达到＆lt; = -300％或＆gt; = 0％，我试图淡出使滑块移动的按钮。如果它被隐藏，则将另一个淡入淡出。

以下代码在页面初次加载后似乎可以正常工作：

// Make the right slide work
$(".goright").click(function(){
    if ($('.goleft').is (':hidden')) {
        $('.goleft').fadeIn();
    };
    $("#slider").animate({left:'-=100%'}, 400, function() {
         var leftPos = $('#slider').css('left');
         if (leftPos >= '-300%') {
              $('.goright').fadeOut(200);}
        });

    });

// Make the left slide work
$(".goleft").click(function(){
    if ($('.goright').is (':hidden')) {
        $('.goright').fadeIn();
    };
    $("#slider").animate({left:'+=100%'}, 400, function() {
         var leftPos = $('#slider').css('left');

         if (leftPos >= '0%') {
              $('.goleft').fadeOut(200);}
        });

    });

但似乎如果页面在渲染后调整大小，右侧控制按钮就会在正确的左侧值淡出，过早淡出。

任何想法出了什么问题？任何帮助表示赞赏！

您可以在此处查看网站：http://www.newactorscompany.com/new/indexx.html

Answer 1

我会以不同的方式来显示/隐藏基于帧的箭头。如果显示第一帧，则隐藏左箭头。如果显示最后一帧，则隐藏右箭头。通过简单的帧计数器。而不是按位置，因为它会在调整窗口大小时看起来位置发生变化，即使使用百分数也是如此。

如果var为TRUE，则为fadeOut DIV元素

1 个答案: