Question

更新
在这些示例中，我们使用 velocity.js 。但如果有人只能使用 jquery 来放弃一个例子，那对我来说没什么问题。只需要理解逻辑，然后我就会尝试适应。

请快速浏览一下：

问题已被解决

我希望这些幻灯片，“显示更少”和“显示更多”以某种方式“关注”幻灯片动画。
在这一刻，他们只是“跳”，使这个动画更加顺畅。
在某种程度上，当内容上升时，按钮也会上升，当内容下降时，内容也会下降。：（

有人可以帮帮我吗？

我依赖于完整形式的Velocity.js，虽然这是可以理解的，也许这就是我做错了。：（

请建议：

complete: function() {
                    $(btShowMoreEventInfo).hide();
                    $(btShowLessEventInfo).show();
                }

HTML：

<div class="event-wrapper">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</div>
<a href="#" class="bt-show-hide-event-info">
        <p class="bt-show-more-event-info">SHOW MORE <br /><img src="/images/eventos/showMore.png" alt="show more" /></p>
        <p class="bt-show-less-event-info">SHOW LESS <br /><img src="/images/eventos/showLess.png" alt="show less" /></p>
</a>

CSS：

body {
  text-align: center;
}

div {
  width: 50%;
  margin: 0 auto;
}

.event-wrapper {
  display: none;  
}

.bt-show-less-event-info {
  display: none;
}

JS：

jQuery('.bt-show-hide-event-info').on('click', function(evt) {
    var eventWrapper = $(this).siblings('.event-wrapper').eq(0);
    var btShowMoreEventInfo = $(this).find('.bt-show-more-event-info');
    var btShowLessEventInfo = $(this).find('.bt-show-less-event-info');

    if ($(eventWrapper).is(':visible')) {
        $(eventWrapper).velocity(
            "transition.slideUpOut",
            {
                duration: 500,
                complete: function() {
                    $(btShowLessEventInfo).hide();
                    $(btShowMoreEventInfo).show();
                }
            }
        );
    } else {
        $(eventWrapper).velocity(
            "transition.slideDownIn",
            {
                duration: 500,
                complete: function() {
                    $(btShowMoreEventInfo).hide();
                    $(btShowLessEventInfo).show();
                }
            });
    }

    evt.preventDefault();
});

Answer 1

希望这会有所帮助，请查看Fiddle

<div class="event-wrapper">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</div>
<a href="#" id="less" class="clickMe">Show Less...
</a>
<a href="#" id="more" style="display: none" class="clickMe">Show More...
</a>


$().ready(function(){
$(".clickMe").click(function(e)
   {
       e.preventDefault();
       $(".event-wrapper").slideToggle("fast", function(){
           if ($(this).is(":visible")) {
               $("#less").show();
               $("#more").hide();
           }
           else
           {
               $("#more").show();
               $("#less").hide();
           }
       })                   
   })
});

我怎样才能创建一个＆＃34; push＆＃34;并且＆＃34;拉＆＃34;影响？

1 个答案: