Question

我真的不确定发生了什么，我尝试了几种不同的方法来实现这一目标，而我却无法实现目标。

我有与我想要动画的div类相同的类，根据单击的按钮（向上或向下按钮）来上下移动。

以下是代码（ jsfiddle ）：

<!DOCTYPE>
<html>
<head>
<title>Sliding</title>
<style type="text/css">
    .haos {
        background-color: rgba(0,0,0,0.5);
        color:white;
        width:inherit;
        height:100px;
        border: 2px solid white;
        padding:25px;
    }
    #btnwrap {
        margin-top:10px;
        text-align: center;
    }
    #big_div {
        margin:0 auto;
        width:300px;
        height:400px;
        background-color: rgba(200,200,200,0.5);
        overflow: auto; 
    }

    .small_div {
        background-color: rgba(0,0,0,0.5);
        color:white;
        width:inherit;
        height:100px;
        border: 2px solid white;
        padding:25px;
        position:relative;
    }
</style>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

        $("#upbtn").click(function(){

                $(".small_div").css({'position':'relative','top':'-5px'})

        });

        //start of DOWN button function
        $("#dwnbtn").click(function(){
            $(".small_div").css({'position':'relative','top':'+5px'})
        });
        //end of down button function

}); 
/*
--I also tried stuff below

$( "#upbtn" ).live( "click", function(data) {
    console.log(data);

  $(".small_div").css({'position':'relative','top':'-5px'})
});

--another try with the pure js and putting onclick atribute in html

function clickit (){

var cusid_ele = document.getElementsByClassName('small_div');
for (var i = 0; i < cusid_ele.length; ++i) {
    var item = cusid_ele[i];  
    item.style.marginTop="5px";
    console.log("event is fired");
}

}

--and the final which I thought will work with .on()
var top  = $('.small_div').offset().top;

$(document).on('click', '#upbtn', function(event) {
    //alert(top); for testing

    top += 50;
    $(".small_div").animate({
        "top": "5px"
    }, "slow"); 
});
*/
</script>
</head>
<body>
<div id="big_div">
    <div class="small_div"  >Some random text here</div>
    <div class="small_div"  >Some random text here</div>
    <div class="small_div"  >Some random text here</div>
    <div class="small_div"  >Some random text here</div>
    <div class="small_div"  >Some random text here</div>
    <div class="small_div"  >Some random text here</div>
    <div class="small_div"  >Some random text here</div>
    <div class="small_div"  >Some random text here</div>
</div>
<div id="btnwrap">
<button id="upbtn" >Up</button>
<button id="dwnbtn">Down</button>
</div>
</body>
</html>

我意识到当代码在不同的文件中没有分开时很难读取代码，但这只是我想在真实网站上实现的一个测试示例，这就是为什么它只是一种类型的文件：

Answer 1

我认为你在寻找的是：

 $(".small_div").css({'top': /*==>*/'+=5px'});

OR

 $(".small_div").css({'top': /*==>*/'-=5px'});

但是您需要记住，您需要为这些元素初始设置初始top值，使用 css 或 js ，否则+=或-=运营商不会做任何事情。

检查updated jsfiddle。（随着对-=和+=的更改，我将top: 0px添加到.small_div规则中

Answer 2

试试这个

演示：jsFiddle

$(document).ready(function () {

    $("#upbtn").click(function () {
        var top = parseInt($(".small_div").css("top"));
        if(isNaN(top)) top=0;
        top+=5;

        $(".small_div").css({
            'position': 'relative',
            'top': top+'px'
        })
    });

    //start of DOWN button function
    $("#dwnbtn").click(function () {

         var top = parseInt($(".small_div").css("top"));

        if(isNaN(top)) top=0;

        top-=5;

        $(".small_div").css({
            'position': 'relative',
            'top': top+'px'
        })
    });
    //end of down button function

});

无法使用jQuery上下移动div

2 个答案: