Javascript 如何在addClass之前制作幻灯片和淡入淡出效果_Javascript_Jquery

Javascript 如何在addClass之前制作幻灯片和淡入淡出效果

javascript jquery

Javascript 如何在addClass之前制作幻灯片和淡入淡出效果,javascript,jquery,Javascript,Jquery,我正在尝试基于jQuery创建幻灯片和淡入淡出效果。在添加函数之前，一切正常addClass。但添加此类后，幻灯片和淡入淡出效果消失在FadeSlideToggle.call（box）之后添加addClass（'hide'）时，javascript效果消失有人能帮我吗？代码如下： <html> <head> <style type="text/css"> .box { background: red;

我正在尝试基于jQuery创建幻灯片和淡入淡出效果。在添加函数之前，一切正常

addClass

。但添加此类后，幻灯片和淡入淡出效果消失

在

FadeSlideToggle.call（box）

之后添加

addClass（'hide'）

时，javascript效果消失

有人能帮我吗？代码如下：

<html>
<head>
    <style type="text/css">
        .box {
            background: red;
            width: 400px;
            position: relative;
            margin-left: auto;
            margin-right: auto;
        }

        .hide {
            display: none;
        }

    </style>
</head>
<body>
    <div class="box">
        <h2>Some Content Here</h2>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </div>  
    <p><button>FadeSlideToggle</button></p>


    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">

            var box = $('div.box');

            function FadeSlideToggle(){

                return $(this).animate({
                    opacity: 'toggle',
                    'height': 'toggle'  
                }, 2000);
            };

            $('button').on('click', function(){
                FadeSlideToggle.call(box);
            });

    </script>
</body> 
</html><html>
<head>
    <style type="text/css">
        .box {
            background: red;
            width: 400px;
            position: relative;
            margin-left: auto;
            margin-right: auto;
        }

        .hide {
            display: none;
        }

    </style>
</head>
<body>
    <div class="box">
        <h2>Some Content Here</h2>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </div>  
    <p><button>FadeSlideToggle</button></p>


    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">

            var box = $('div.box');

            function FadeSlideToggle(){

                return $(this).animate({
                    opacity: 'toggle',
                    'height': 'toggle'  
                }, 2000);
            };

            $('button').on('click', function(){
                FadeSlideToggle.call(box);
            });

    </script>
</body> 
</html>


.盒子{
背景：红色；
宽度：400px；
位置：相对位置；
左边距：自动；
右边距：自动；
}
.隐藏{
显示：无；
}
这里有一些内容

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。

时尚滑动开关
变量框=$（'div.box'）；
函数FadeSlideToggle（）{
返回$（此）。设置动画({
不透明度：“切换”，
“高度”：“切换”
}, 2000);
};
$（'button'）。在（'click'，function（）上{
FadeSlideToggle.呼叫（框）；
});
.盒子{
背景：红色；
宽度：400px；
位置：相对位置；
左边距：自动；
右边距：自动；
}
.隐藏{
显示：无；
}
这里有一些内容

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。

时尚滑动开关
变量框=$（'div.box'）；
函数FadeSlideToggle（）{
返回$（此）。设置动画({
不透明度：“切换”，
“高度”：“切换”
}, 2000);
};
$（'button'）。在（'click'，function（）上{
FadeSlideToggle.呼叫（框）；
});

使用完整回调

var box = $('div.box');

function FadeSlideToggle(callback){

    return $(this).animate({
        opacity: 'toggle',
        'height': 'toggle'  
    }, 2000, callback);
};

$('button').on('click', function(){
    FadeSlideToggle.call(box, function() {
         //do something you want
    });
});

谢谢你的LowerClassOverflovian

解决方案之一是使用jQueryUI

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript">

            var box = $('div.box');

            function FadeSlideToggle(speed){

                return $(this).animate({
                    'opacity': '0',
                    'height': 0 
                }, speed || 2000);
            };

            $('button').on('click', function(){
                FadeSlideToggle.call(box, 5000).addClass('hide', {
                    queue: true
                });
            });

    </script>


变量框=$（'div.box'）；
功能FadeSlideToggle（速度）{
返回$（此）。设置动画({
“不透明度”：“0”，
“高度”：0
}，速度| | 2000）；
};
$（'button'）。在（'click'，function（）上{
FadeSlideToggle.call（框，5000）.addClass（'hide'，0）{
队列：对
});
});

addClass

立即生效，它不像动画方法那样排队。@Barmar如何先制作幻灯片和淡入淡出效果，然后再制作addClass