Question

我是JQuery的新手，我找到了这个链接：jQuery Effects

我想做的同时切换淡入淡出和幻灯片（Slide-Fade Togle）。

这是JavaScript代码：

JavaScript的：

jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);  
};

但我不知道如何让它发挥作用。以下是我的“Fade Togle”效果代码：

<script type="text/jscript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
    #Container 
    {
        padding: 10px;
        height: 100px;
        width: 100px;
        background: #e459e9;
    }
</style>

<body>
<button>fadeToggle</button>     
<div id="Container">
    <p>Watch me fade.</p>   
</div>         
<script type="text/jscript"> 
 $(document).ready(function() {
    $("button:first").click(function() {   
        $(this).next().fadeToggle("slow"); 
        $(this).slideDown("slow");
    });
});     
</script>

Answer 1

您没有使用您定义的功能。下面的作品。

jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
    return $(this).animate({opacity: 'toggle', height:'toggle'}, speed, easing, callback);  
};
$(document).ready(function() {
    $("button:first").click(function() {   
        $(this).next().slideFadeToggle("slow",'',function(){});

    });
})

http://jsfiddle.net/caSbk/

Answer 2

应该是$(this).next().slideFadeToggle("slow");而不是$(this).next().fadeToggle("slow");

此外，您需要指定所有3个参数 - 速度，缓动和回调，因为您没有为它们提供默认值。

并确保您发布的Javascript函数包含在某处，作为外部文件或$(document).ready之前

如何使这个JQuery工作

2 个答案: