Question

我有两个宽度为100％的div并排绝对定位。单击按钮时我想将其向左滑动。然后点击相同的按钮，我希望它回到正常位置。

这是我的JsFiddle

第一部分工作正常，但我无法将其滑回。 jQuery代码的第二部分不起作用。任何人都可以告诉我它不工作的原因以及如何使其工作

<div class="about-deals">
<span class="view-tomorrow-deal">View Tomorrow Deals</span>
</div>
<div class="deals-image-wrapper">
    <div class="deal-container">
        <div class="today-deals">
        </div>
        <div class="tomorrow-deals">
        </div>
    </div>
</div>

Answer 1

试试这个JSFiddle

$(document).on('click', '.view-tomorrow-deal', function(event) {
        $(this).removeClass('view-tomorrow-deal');
        $(this).addClass('view-today-deal');
        $(this).text('View Today Deals');
        $('.deal-container').animate({left: '-100%'}, 1000);
    });
$(document).on('click', '.view-today-deal', function(event) { 
        event.preventDefault();
        $(this).removeClass('view-today-deal');
        $(this).addClass('view-tomorrow-deal');
        $(this).text('View Tomorrow Deals');
        $('.deal-container').animate({left: '0%'}, 1000);
    });

Answer 2

这并不是创建切换功能的方法当您附加事件处理程序时，该事件处理程序将附加到当时与给定选择器匹配的任何元素，稍后更改该类不会删除事件处理程序或使在pageload上执行的事件处理程序神奇地开始工作，除非

只需在同一个点击处理程序中切换功能，如果需要，可以使用标志等。

$('.view-tomorrow-deal').click(function (event) { $(this).text(function(_,txt) { return txt == 'View Tomorrow Deals' ? 'View Today Deals' : 'View Tomorrow Deals'; }); $('.deal-container').animate({ left: $('.deal-container').position().left === 0 ? '-100%' : '0%' }, 1000); });

FIDDLE

Answer 3

尝试jQuery切换

   $( "#clickme" ).click(function() {
  $( "#book" ).slideToggle( "slow", function() {
   // Animation complete.

   });
 });

或 $（ “＃书”）切换（ “滑动”）;

链接：https://api.jquery.com/slideToggle/

用于幻灯片效果

堆叠链接：slideToggle JQuery right to left

动态地将类应用于无法执行单击事件的按钮

3 个答案: