                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

JQ中css不能实现和animate不能实现,不知道问题在哪?

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
        <title>jQuery动画特效</title>
	    <script>
	        
	        
	        $(function(){
	            $("body").append("<button id='you'>右移动50PX</button>"),
	            $("body").append("<button id='zuo'>左移动50PX</button>"),
	            $("body").append("<div>这是一段可以移动的文字</div>")
	        });
	        $("div").css({"background-color":"red","color":"white","text-align":"center"});
	        $("#you").bind("click",function(){$("div").animate({left: "+=100px"},2000)});
	        $("#zuo").bind("click",function(){$("div").animate({right: "+=100px"},2000)});
	    </script>
    </head>
    <body>
    </body>
</html>

修改过后无法实现居中显示还有无法实现移动效果?

<!DOCTYPE html>

<html>

<head>

<title>jQuery动画特效</title>

$(function(){

$("body").append("<button id='you'>右移动50PX</button>"),

$("body").append("<button id='zuo'>左移动50PX</button>"),

$("body").append("<div>这是一段可以移动的文字</div>")

$("body").css({"margin":"20 auto"});

$("div").css({"background-color":"red","color":"white","width":"300","height":"80",});

$("#you").bind("click",function(){$("div").animate({left: "+=100px"},2000,function(){})});

$("#zuo").bind("click",function(){$("div").animate({right: "+=100px"},2000,function(){})});

});

</script>

</head>

<body>

</body>

</html>

kim4

2015-12-14

源自：jQuery基础课程 7-9

关注问题我要回答

699

操作

收起

4 回答

木子舟义
2015-12-14

$("div").css({"background-color":"red","color":"white","text-align":"center"});

$("#you").bind("click",function(){$("div").animate({left: "+=100px"},2000)});

$("#zuo").bind("click",function(){$("div").animate({right: "+=100px"},2000)});

把这三个也放在function里

0 回复有任何疑惑可以回复我~

收起回答

kim4 提问者

请问一下,修改过后还是无法实现居中和移动效果?问题在哪?

2015-12-14 回复有任何疑惑可以回复我~

kim4 提问者

非常感谢！

2015-12-14 回复有任何疑惑可以回复我~

Molin_X
2015-12-25

//去吧，皮卡丘！
<script>
    $(function () {
        var demoBody=$("body");
        demoBody.append("<button id='left'>右移动100PX</button><button id='right'>左移动100PX</button>");
        demoBody.append("<div>这是一段可以移动的文字</div>");
        $("div").css({
            "background-color": "red",
            "color": "white",
            "text-align": "center",
            "width": "200px",
            "margin": "0 auto",
            "position": "relative"
        });
        $("#left").on("click", function () {
            $("div").animate({left: "+=100px"}, 1000)
        });
        $("#right").on("click", function () {
            $("div").animate({left:"-=100px"}, 1000)
        });
    });
</script>

2 回复有任何疑惑可以回复我~

收起回答

Molin_X

1 定位的right和left是不能同时作用在同一个元素上的（这很容易理解），同时存在时left优先级会更高。 2 "margin":"20 auto"这种类型样式只能放在块级子元素上，放在父元素上是没有效果的。

2015-12-25 回复有任何疑惑可以回复我~