左側和右側jQuery動畫運動

使用jquery的.css()我正在改變左側屬性值來左右移動div。我正在尋找一種方式來爲這種變化發生動畫。沒有嘗試過的工作，我嘗試過jQueryUI的.show(slide)函數，但這會移動整個div，而不僅僅是我需要的120px運動。左側和右側jQuery動畫運動

這是工作沒有動畫我目前的功能：

$('#plrt').live("click",function(){ 
    var lm=$('.plwid').css("left"); 
    lm = (parseInt(lm) + 120); 
    $('.plwid').css("left", lm);  
});

這是滑動功能，它不能正確作爲整個DIV從display:hide去display:show工作，而不僅僅是移動像素改變

來源

2012-05-24 JimmyBanks

您是否嘗試過用動畫？ – Jrod

@dqlopez。你需要在鏈接中使用'http：//'，所以它會起作用... – gdoron

向我們展示一些[demo]（http://jsfiddle.net），或者如@Jrod ['animate（）']（http ：//api.jquery.com/animate/）。 – deex

嘗試animate()

$('#plrt').on("click",function(){ 
    $('.plwid').animate({ left: '+=120' }, 400); 
});

來源

2012-05-24 01:22:11

注意'live'已棄用。 – deex

@dqlopez我剛剛使用OP的代碼，但好點 - 更新 –

@dqlopez這就是我使用'.live'，糟糕的習慣使用1.7之前的糟糕習慣@zoltan，謝謝先生，這工作像一個魅力 – JimmyBanks

試試這個

$('#plrt').on('click', function() { 
    $('.plwid').animate({ left: '+=120', 5000 });  
});

來源

2012-05-24 01:24:09

我掀起了一個我認爲你正試圖實現的簡單例子。
你應該檢查出jQuery Animate。

//note live is deprecated 
 
$('#plrt').on("click", function() { 
 
    //perform custom animation to add 120px to current left CSS position 
 
    $('.plwid').animate({ 
 
    left: '+=120' 
 
    }); 
 
});

#plrt{ 
 
    position:relative; 
 
    background:red; 
 
    width:100px; 
 
    height:100px; 
 
    cursor:pointer; 
 
} 
 

 
.plwid{ 
 
    position:absolute; 
 
    background:blue; 
 
    width:100px; 
 
    height:100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="plrt"></div> 
 
<div class="plwid"></div>

來源

2012-05-24 01:25:43 N1ck

左側和右側jQuery動畫運動

回答

相關問題