[英]Move element in div to the left
我在鼠標懸停事件上有一個元素,希望對其進行動畫處理並向左移動。 我以為是正確的代碼,但這似乎只是行之有效。
這是我創建的小提琴:
https://jsfiddle.net/feb8rdwp/3/
這是我使用的代碼-很簡單,但是基於此,它確實應該可以工作: http : //www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1
$(".Submit a").mouseover(function(){ $(".fadeInLeftBig").animate({left: '750px'}); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="animation fadeInLeftBig animated"><img alt="" src="http://younggraphics.com.au/Portals/0/images/skin/car.png" /></div> <div class="Submit"><a id="dnn_ctr461_FormsView_lnkSubmitEmail" class="Button_default" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("dnn$ctr461$FormsView$lnkSubmitEmail", "", true, "", "", false, true))'>Submit</a></div>
要應用left
屬性,請使元素位置相對於父元素相對/絕對,
.animation{
position:relative;
}
或使用marginLeft
$(".Submit a").mouseover(function(){
$(".fadeInLeftBig").animate({marginLeft: '750px'});
});
首先,您必須將jQuery作為庫添加到小提琴中,其次,如果要使用left,則需要將元素設置為絕對位置,這意味着父級需要相對位置
<div style="position: relative;">
<div style="position:absolute;">This div can use the left css</div>
</div>
也許您應該嘗試這樣:
$('.block').mouseover(function() {
$(this).animate({"left": "+=700px"},"slow");
});
您可以在這里嘗試-https: //jsfiddle.net/dimitrioglo/ebkc9dzL/25/
工作示例:
<div class="Submit"><a id="dnn_ctr461_FormsView_lnkSubmitEmail" class="Button_default" href='#'>Submit</a></div>
JavaScript的:
$(document).ready(function(ee){
$(".Button_default").click(function(){
$(".fadeInLeftBig").animate({left: '750px'});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.