2015-05-01 3 views
1

У меня есть элемент мыши над событием, что я хотел бы быть анимированным и перемещаться влево. У меня есть то, что я считал правильным кодом в порядке, но, похоже, это просто модно работать.Переместить элемент в div слева

вот скрипку я создал:

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>

+1

У вас есть не включен jQuery в JSfiddle. Кроме того, CSS не применяется первоначально. –

+0

doh справа - добавлено и обновлено. Все равно не уходи! – user2034164

ответ

2

Чтобы применить свойство left, сделайте положение элемента r elative/абсолютный родитель,

.animation{ 
    position:relative; 
} 

Или используйте marginLeft

$(".Submit a").mouseover(function(){ 
    $(".fadeInLeftBig").animate({marginLeft: '750px'}); 
}); 
+0

рок-звезда эта простой !!!!! – user2034164

0

Сначала вы должны добавить Jquery в качестве библиотеки для вашей скрипки и вторым, если вы хотите использовать влево, то вам необходимо установить элемент к абсолютному положению, что означает, родитель требует относительного положения

<div style="position: relative;"> 
    <div style="position:absolute;">This div can use the left css</div> 
</div> 

https://jsfiddle.net/feb8rdwp/5/

+1

Ничего себе, этот автомобиль взлетает, как бат из ада! – Barmar

+1

И я чувствую себя механиком, который только что зафиксировал автомобиль. –

+0

. Интересно, что эти анимации могут привести к неправильным ожиданиям от производителей автомобилей. –

0

Рабочий пример:

<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'}); 
    }); 
}); 
Смежные вопросы