jquery - Jquery切换淡入淡出和动画

Question

我使用切换按钮来显示/隐藏我的页面的内容。我的目标是从#circleBtn切换内容，但我希望#logo“向上切换”并淡出，#content div向左切换并在切换时淡出..现在一切都消失了..

<script type="text/javascript">

    jQuery(document).ready(function($) {
        $("#circleBtn").click(function() { 
            $('#logo,#access,#content').fadeToggle('easeInElastic');
        });

        $("#logo").click(function () {
            $("#content").show("slide", { direction: "left" }, 1000);
        }); 
    });

</script>

Answer 1

据我所知，没有内置的 jQuery 方法可以向上或横向滑动元素并同时将其淡出，但是使用该animate()方法您可以为您想要的任何内容设置动画，并使其切换，您可以使用一只旗

jQuery(function($) {
    $("#circleBtn").on('click', function() { 
        var flag = $(this).data('flag');

        $('#logo, #access, #content').animate({
            top     : (flag ? -100 : 0),
            opacity : (flag ? 0 : 1)
        }, 1000, 'easeInElastic');

        $(this).data('flag', !flag);
    });
});

小提琴

Answer 2

您是否有任何理由不想将所有用于切换和淡化 HTML 元素的代码放在 circleBtn 单击侦听器函数中？

像这样：

$("#circleBtn").click(function() { 
   $("#content").show("slide", { direction: "left" }, 1000);
   $("#logo").show("slide", {direction: "up" },1000);
   $('#logo,#access,#content').fadeToggle('easeInElastic');
});

Answer 3

您可以尝试使用 jquery,animate 代替，因为您似乎需要自定义动画。

尝试：

$('#logo').animate({
  opacity:0,
  height: 0
});

$('#content').animate({
  opacity:0,
  width: 0
});

你可以反过来向他们展示