1

更新：
在这些示例中，我们使用velocity.js。但是，如果有人可以仅使用jquery删除一个示例，那对我来说很好。只需要理解逻辑，然后我尝试适应。

请在这里快速浏览：

http://codepen.io/anon/pen/xbVpBO

试图解决的问题

我希望按钮“少显示”和“多显示”以某种方式“跟随”幻灯片动画。
这一刻，他们只是“跳跃”，让这个动画变得更加流畅。
在某种程度上，当内容上升时，按钮也会上升，当内容下降时，内容也会下降。:(

谁能帮帮我？

我依赖于完整形式的 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();
});
4

1 回答 1

1

希望这有帮助，检查这个小提琴

<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();
           }
       })                   
   })
});
于 2014-12-13T11:43:18.993 回答