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);
    });
});

FIDDLE

Answer 2

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

像这样：

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

Answer 3

你可以尝试使用jquery，而不是动画，因为看起来你想要一个自定义动画。

尝试：

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

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

您可以反过来显示它们

Jquery切换淡入淡出和动画

3 个答案: