Show hide Toggle

show()

$("button").eq(0).click(function () {
    // $("div").css("display", "block");
    // Note: the time here is milliseconds
    $("div").show(1000, function () {
        // Action: after the animation is executed, it is called.
        alert("Display animation completed");
    });
});

Animation hide()

$("button").eq(1).click(function () {
    // $("div").css("display", "none");
    $("div").hide(1000, function () {
        alert("Hide animation done");
    });
});

Animation toggle()

$("button").eq(2).click(function () {
    $("div").toggle(1000, function () {
        alert("Switch animation completed");
    });
});

Magical couplet example

• scroll()
• scrollTop()

  // 1. Monitor the scrolling of web pages
$(window).scroll(function () {
     // 1.1 get the offset of web page scrolling
     var offset = $("html,body").scrollTop();
     // 1.2 judge whether the web page scrolls to the specified position
     if(offset >= 500){
         // 1.3 display advertisement
         $("img").show(1000);
     }else{
         // 1.4 hidden advertising
         $("img").hide(1000);
     }
 });

Expand - stow and toggle

• slideDown()
• slideUp()
• slideToggle()

 $("button").eq(0).click(function () {
    $("div").slideDown(1000, function () {
        alert("Unfolded");
    });
});
$("button").eq(1).click(function () {
    $("div").slideUp(1000, function () {
        alert("End up");
    });
});
$("button").eq(2).click(function () {
    $("div").slideToggle(1000, function () {
        alert("End up");
    });
});

Collapse menu - drop down menu

Folding menu

• slideDown()
• siblings()
• slideUp()

$(function () {
 // 1. Listen to the click event of the first level menu
 	$(".nav>li").click(function () {
     // 1.1 get the secondary menu
     var $sub = $(this).children(".sub");
     // 1.2 expand the secondary menu
     $sub.slideDown(1000);
     // 1.3 get all non current secondary menus
     var otherSub = $(this).siblings().children(".sub");
     // 1.4 let all non current secondary menus fold up
     otherSub.slideUp(1000);
     // 1.5 rotate the clicked first level menu arrow
     $(this).addClass("current");
     // 1.6 restore all non clicked first level menu arrows
     $(this).siblings().removeClass("current");
 });
});

drop-down menu

/*
Tip summary: if you need to execute animation in jQuery, it is recommended to call the stop method before executing the animation,
And then do the animation
            */
// 1. Listen for the move in event of the first level menu
$(".nav>li").mouseenter(function () {
    // 1.1 get the secondary menu
    var $sub = $(this).children(".sub");
    // Stop the currently running animation:
    $sub.stop();
    // 1.2 expand the secondary menu
    $sub.slideDown(1000);
});
// 2. Listen to the move out event of the first level menu
$(".nav>li").mouseleave(function () {
    // 1.1 get the secondary menu
    var $sub = $(this).children(".sub");
    // Stop the currently running animation:
    $sub.stop();
    // 1.2 stow the secondary menu
    $sub.slideUp(1000);
});

Fade in / out - pop up ads

Fade in and fade out

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

// Write jQuery related code
$("button").eq(0).click(function () {
    $("div").fadeIn(1000, function () {
        alert("Fade in");
    });
});
$("button").eq(1).click(function () {
    $("div").fadeOut(1000, function () {
        alert("Fade out");
    });
});
$("button").eq(2).click(function () {
    $("div").fadeToggle(1000, function () {
        alert("Switch over");
    });
});
$("button").eq(3).click(function () {
    $("div").fadeTo(1000, 0.2, function () {
        alert("Fade in");
    })
});

Pop-up advertising

// 1. Listen for span click events
$("span").click(function () {
    $(".ad").remove();
});

// 2. Execution of advertising animation
/*
$(".ad").slideDown(1000, function () {
    $(".ad").fadeOut(1000, function () {
        $(".ad").fadeIn(1000);
    });
});
*/
$(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);

Custom animation

animate()

$("button").eq(0).click(function () {
    /*
    $(".one").animate({
        width: 500
    }, 1000, function () {
        alert("Finished executing custom animation ');
    });
    */
    $(".one").animate({
        marginLeft: 500
    }, 5000, function () {
        // alert("custom animation execution completed");
    });
    /*
    First parameter: receive an object, in which you can modify properties
    Second parameter: Specifies the animation duration
    The third parameter: Specifies the animation rhythm, which is swing by default
    The fourth parameter: callback function after animation execution
    */
    $(".two").animate({
        marginLeft: 500
    }, 5000, "linear", function () {
        // alert("custom animation execution completed");
    });
})
$("button").eq(1).click(function () {
    $(".one").animate({
        width: "+=100"
    }, 1000, function () {
        alert("Custom animation completed");
    });
});
$("button").eq(2).click(function () {
    $(".one").animate({
        // width: "hide"
        width: "toggle"
    }, 1000, function () {
        alert("Custom animation completed");
    });
})

stop and delay methods

$("button").eq(0).click(function () {
	/*In {} of jQuery, multiple attributes can be modified at the same time, and the animation of multiple attributes can also be executed at the same time*/
	/*
	$(".one").animate({
	    width: 500
	    // height: 500
	}, 1000);
	$(".one").animate({
	    height: 500
	}, 1000);
	*/
	/*delay Method is used to tell the system the delay time*/
	/*
	$(".one").animate({
	    width: 500
	    // height: 500
	}, 1000).delay(2000).animate({
	    height: 500
	}, 1000);
	*/
	$(".one").animate({
	    width: 500
	}, 1000);
	$(".one").animate({
	    height: 500
	}, 1000);
	
	$(".one").animate({
	    width: 100
	}, 1000);
	$(".one").animate({
	    height: 100
	}, 1000);
	});
	$("button").eq(1).click(function () {
		// Stop the current animation now and continue with the subsequent animation
	// $("div").stop();
	// $("div").stop(false);
	// $("div").stop(false, false);
		// Stop all current and subsequent animations now
	// $("div").stop(true);
	// $("div").stop(true, false);
		// Complete the current now and continue with the following animation
	// $("div").stop(false, true);
		// Immediately complete the current and stop all subsequent
	$("div").stop(true, true);
	});

Icon effects

A key
Dynamic cut graph
Space between two animations

// 1. Traverse all li
$("li").each(function (index, ele) {
     // 1.1 generate new picture location
     var $url = "url(\"images/bg.png\") no-repeat 0 "+(index * -24)+"px"
     // 1.2 set new picture location
     $(this).children("span").css("background", $url);
 });
 // 2. Listen for li move in event
 $("li").mouseenter(function () {
     // 2.1 move icon up
     $(this).children("span").animate({
         top: -50
     }, 1000, function () {
         // 2.2 move the picture down
         $(this).css("top", "50px");
         // 2.3 reset the picture
         $(this).animate({
             top: 0
         }, 1000);
     });
 });

Radio cycle rolling of the carousel chart

A key

• In order to give the illusion of infinite cycle, we need to splice 6 pictures, 123412
• The mask effect adopts fade function fadeto() to fade out 0.5

// 0. Define variable save offset
var offset = 0;
// 1. Roll up the picture
var timer;
function autoPlay(){
    timer = setInterval(function () {
        offset += -10;
        if(offset <= -1200){
            offset = 0;
        }
        $("ul").css("marginLeft", offset);
    }, 50);
}
autoPlay();

// 2. Listen for the move in and move out events of li
$("li").hover(function () {
    // Stop rolling
    clearInterval(timer);
    // Add mask to non current selection
    $(this).siblings().fadeTo(100, 0.5);
    // Remove the currently selected mask
    $(this).fadeTo(100, 1);
}, function () {
    // Continue rolling
    autoPlay();
    // Remove all masks
    $("li").fadeTo(100, 1);
});