jquery--常用的函数2

时间：2023-03-08 22:48:54
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery--常用函数2</title>

<style>

.div1{width: 600px; height: 300px; background: red;}

.div2{width: 300px; height: 200px; background: yellow;}

</style>

<script src='../jquery-3.1.1.min.js'></script>

<script>

$(function(){

    $('.div1').hover(function(){

    // $(this).css('background','blue');

    // $('.div2').show(300);

    // $('.div2').fadeOut();

     $('.div2').slideUp();

    },

    function(){

    // $(this).css('background','yellow');

    // $('.div2').hide(300);

    // $('.div2').fadeIn();

       $('.div2').slideDown();

    });

});

</script>

</head>

<body>

<div class="div1">

         hover();鼠标移入移出  参数1移入  参数2 移出<br/>

         hover(function(){},function(){})<br/>

         show();显示         hide();隐藏<br/>

         $('.div2').show()   参数就是运动时间             <br/>

         fadeOut()  淡入        fadeIn 淡出

         $('.div2').fadeIn();参数就是变化时间 <br/>

         slideUp();向上变化          slideDown(); 向下变化<br/>

          $('.div2').slideDown();     参数就是变化时间<br/>

    </div>

<div class="div2">

</div>

</body>

</html>

相关文章