Web前端开发笔记53——Jquery动画效果，鼠标hover方法的简单用法

1.显示效果的语法规范：

2.隐藏效果同理。

下面使用上面的显示隐藏做一个效果：

<div class="div1">
    隐藏效果
</div>
<button id="showorhidebtn">
    click me to change show or hide.
</button>
<script>
    $("#showorhidebtn").click(function () {
        if ($(".div1").css('display') == "block"){
            $(".div1").text("隐藏效果");
            $(".div1").hide(1000, "swing");
        }else{
            $(".div1").text("显示效果");
            $(".div1").show(1000, "swing");
        }

    })
</script>

效果显示：

通过对按钮的点击就能切换其效果。

3.切换效果的展示：

为了弥补上面要设置判定条件的办法。

我们使用toggle的方法来实现按钮切换效果。

$("#showorhidebtn").click(function () {
        $(".div1").toggle(1000, "linear", function () {
            if ($(".div1").css('display') == "none") {
                $(".div1").text("显示效果");
            } else {
                $(".div1").text("隐藏效果");
            }
        });

    })

这个方法就可以自由切换显示和隐藏了。

4.滑动效果：

滑动效果类似显示隐藏效果的用法。

下面是实际操作，在上一节中我们展示了tab的实现，但是内容框我们想在我们没有选中功能选项的时候消失

$(".tabnav>div").bind("mouseover", function () {
        $(".content>div").eq($(this).index()).slideDown(1000).siblings("div").slideUp()
    })
    $(".tabnav").bind("mouseleave",function () {
        $(".content").slideUp(2000)
    })
    $(".tabnav").bind("mouseenter",function () {
        $(".content").slideDown(2000)
    })

上面就能实现滑动的效果，同样我们也演示以下slidetoggle的用法。

$(".tabnav>div").bind("mouseover", function () {
        $(".content>div").eq($(this).index()).slideDown(2000).siblings("div").slideUp()
    })
    $(".tabnav").bind("mouseenter", function () {
        if ($(".content").css("display") == "none") {
            $(".content").slideToggle(1000)
        }
    })
    $(".tabnav").bind("mouseleave", function () {
        $(".content").slideToggle(1000)
    })

5.各位在尝试上面代码的时候会出现一个问题就是他的动画只要触发了就一定会执行完，这样会导致动画或效果队列。

我们需要他们停止排队。

使用stop()。

如下代码所示：

$(".tabnav>div").bind("mouseover", function () {
        $(".content>div").eq($(this).index()).stop().slideDown(1000).siblings("div").stop().slideUp(1000)
    })
    $(".tabnav").bind("mouseenter", function () {
        if ($(".content").css("display") == "none") {
            $(".content").stop().slideToggle(1000)
        }
    })
    $(".tabnav").bind("mouseleave", function () {
        $(".content").stop().slideToggle(1000)
    })

需要注意的是，我们需要将stop（）写到动画或效果函数之前。

6.淡入淡出效果。

下面是一个示例：

<div class="fadediv">
    这里是一个淡入淡出的效果
</div>
<button id="fadeclick">启用效果</button>
<script>
    $("#fadeclick").bind('click',function (){
        $(".fadediv").stop().fadeToggle(1000,'swing');
    })
</script>

 

这里也展示一下调整不透明度的一个用法：

<div class="imgcontent">
    <ul>
        <li><img src="image/炭治郎1.jpeg" alt="炭治郎"></li>
        <li><img src="image/炭治郎2.jpeg" alt="炭治郎"></li>
        <li><img src="image/炭治郎3.jpeg" alt="炭治郎"></li>
    </ul>
</div>
<script>
    $(".imgcontent>ul>li").hover(function () {
        $(this).siblings("li").stop().fadeTo(1000,0.5)
    }, function () {
        $(this).siblings("li").stop().fadeTo(1000,1)
    })
</script>

效果如下：

选中中间的图片其余的会变半透明。

7.动画animate的用法：

这和我们之前用原生JS书写的animate要强大许多。

下面展示一下用法：

<div class="animatediv">这里有一个动画效果，我想让它向</div>
<button id="animateclick" style="float: right;">启用效果</button>
<script>
    $("#animateclick").bind('click', function () {

        if ($(".animatediv").css('height') == "100px") {
            $(".animatediv").stop().animate
            ({left: 0, top: 0, opacity: 1, width: "200px", height: "200px"}, 1000)

        } else {
            $(".animatediv").stop().animate
            ({left: "500px", top: "1000px", opacity: .5, width: "100px", height: "100px"}, 1000)
        }
    })
</script>