javascript-jQuery动画

编程之家收集整理的这篇文章主要介绍了javascript-jQuery动画编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

这是简单的向上滑动动画.问题是当我更改myDiv类的“top”参数时,动画工作不正确,而不是向上滑动,而是从顶部向下滑动.仅当我第一次单击按钮时,它才能正常工作.当我将myDiv的top参数更改为更大的数字时,就没有更多问题了.您能帮我发现代码有什么问题吗?<style>.box{

这是简单的向上滑动动画.问题是当我更改mydiv类的“ top参数时,动画工作不正确,而不是向上滑动,而是从顶部向下滑动.仅当我第一次单击按钮时,它才能正常工作.当我将mydivtop参数更改为更大的数字时,就没有更多问题了.您能帮我发现代码有什么问题吗?

   <style>
    .Box {
        position:relative;
        wIDth: 200px;
        height: 500px;
    }
    .mydiv {
        position: absolute;
        wIDth:100%;
        overflow: hIDden;
        bottom:0px;
        top:10px;
        left:500;
    }
</style>
<script>
    var swt = 0;
    $(document).ready(function () {
        $(".b1").click(function () {

            var div = $(".mydiv");
            if (swt == 0) {
                div.animate({
                    top: '300px',
                    opacity: '1'
                }, "slow");
                //  div.animate({height:'300px', opacity:'1'},"slow");
                swt++;
            } else {
                div.animate({
                    top: '500px',
                    opacity: '1'
                }, "slow");
                //  div.animate({height:'0px', opacity:'1'},"slow");
                swt--;
            }
        });
    });
</script>
</head>
<body>
    <button class="b1">Start Animation</button>
    <p>posds</p>
    <div class="Box">
        <div class="mydiv" style="background:#7549B1; wIDth:200px;"></div>
    </div>
</body>

</HTML>

解决方法:

我不确定您想要的效果如何,但也许它正在更改最低值而不是最高值:

if(swt==0){
    div.animate({bottom:'500px', opacity:'1'}, "slow");
    swt++;  
} else {
    div.animate({bottom:'300px', opacity:'1'}, "slow");
    swt--;
}

http://jsbin.com/ixigaf/1/edit

总结

以上是编程之家为你收集整理的javascript-jQuery动画全部内容,希望文章能够帮你解决javascript-jQuery动画所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

jQuery文章

由于是触摸屏,所以需要一款JS虚拟键盘。上网找了一个好用的VirtualKeyboard,作了修改。 修改该插件参考的博客文章:http://www.cnblogs.com/xinggong/arch
HashMap代码(这种实现方式是错误的,错误原因:代码中_map、_length变量是HashMap的所有实例共用的): /** * HashMap * 2021年09月09日 */ (functi
一、引用CSS和JS:View Code二、HTML:View Code三、JS:$(function () { var total = parseInt(&quot;@(ViewBag.total)
JS数字键盘,JS小键盘CSS代码:#numberkeyboard{ border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; ma
C.js代码: /** * 有BUG */ (function (global) { var _id; var _map; var _length; global.C = function () {
一、节点模糊搜索功能:搜索成功后,自动高亮显示并定位、展开搜索到的节点。二、节点异步加载:1、点击展开时加载数据;2、选中节点时加载数据。前台代码如下:View Code View Code后台代码(
需求:页面显示教师信息列表,列表中每一条数据显示图片滚动插件,每张图片的长宽及长宽比例各不相同。 前提条件:美工把静态页面写好 HTML代码: @using Models; @{ List&lt;cm
示例代码: marker.addEventListener(&quot;click&quot;, function(){ if (!window.markerClicked) { window.mar
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注