Home/ Questions/Q 6685955
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:07:01+00:00

I’m new in JQuery, I found this link: jQuery Effects and I want to

  • 0

I’m new in JQuery, I found this link: jQuery Effects

and I want to do the one in which toggles a fade and a slide at the same time (Slide-Fade Togle).

this is the JavaScript code:

JavaScript:

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

but I don’t know how to make it work. The following is my code for just “Fade Togle” effect:

<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>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re not using the function you defined. Below works.

    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/

    • 0