Как повернуть DIV, а Jquery одушевляет же DIV

У меня есть код ...Как повернуть DIV, а Jquery одушевляет же DIV

$(document).ready(function(){ 

    $("#box").animate({ 
     top: "250px", 
     left: "500px", 
     width: '300px', 
     height: '250px', 
    }, 2000); 

});

... переместить и изменить размер моих дел.

Я искал в Интернете и нашел функцию, которая позволяет div поворачиваться с помощью jQuery. К сожалению, jQuery использует CSS для этого, что означает, что он не позволяет вращению div, когда он меняет размер и положение.

То, что я надеюсь, это то, что div вращается, увеличиваясь в размере и изменяя положение, все одновременно. Я не уверен, что это возможно, но если бы вы могли объяснить мне, как это делается.

Единственное, что я могу придумать, это то, что я делаю все 3 анимации, используя CSS вместо jQuery. Как это возможно, или что является самым простым способом сделать то, что я пытаюсь сделать. Большое спасибо !!

Вот мой CSS код:

#box{ 

     -moz-border-radius:15px; 
     border-radius:15px; 
     width:1px; 
     height:1px; 
     background:#D8D8D8; 
     border:2px solid black; 
     position: relative; 
     margin-left:100px; 
     margin-top:150px; 


    }

источник

2013-08-16 Greg Peckory

«JQuery использует CSS, чтобы сделать это означает, что он не позволяет поворотному элементу во время его изменения размер и положение ». Я не вижу, чтобы быть честным, почему вы не можете одновременно анимировать несколько свойств? Как вы вращали элемент? – xec

CSS оживляет вращение, прежде чем jQuery оживит изменение положения и размера. Поэтому он вращается, а затем меняет размер. Вместо того, чтобы одновременно менять и изменять размер. –

Не могли бы вы сделать демо на http://jsfiddle.net, где это происходит? – xec

Это грязно, но бросать в некоторых CSS анимации сделал работу.

http://jsfiddle.net/Pd426/1/

Новый CSS:

#box{ 

     -moz-border-radius:15px; 
     border-radius:15px; 
     width:1px; 
     height:1px; 
     background:#D8D8D8; 
     border:2px solid black; 
     position: relative; 
     margin-left:100px; 
     margin-top:150px; 


    transform:rotate(0deg); 
-ms-transform:rotate(0deg); /* IE 9 */ 
-webkit-transform:rotate(0deg); /* Safari and Chrome */ 


    animation: rotate 2s; 
-webkit-animation: rotate 2s; /* Safari and Chrome */ 

    } 

@keyframes rotate 
{ 
from { transform:rotate(0deg); 
-ms-transform:rotate(0deg); /* IE 9 */ 
-webkit-transform:rotate(0deg); /* Safari and Chrome */} 
to { transform:rotate(360deg); 
-ms-transform:rotate(360deg); /* IE 9 */ 
-webkit-transform:rotate(360deg); /* Safari and Chrome */} 
} 

@-webkit-keyframes rotate /* Safari and Chrome */ 
{ 
from { transform:rotate(0deg); 
-ms-transform:rotate(0deg); /* IE 9 */ 
-webkit-transform:rotate(0deg); /* Safari and Chrome */} 
to { transform:rotate(360deg); 
-ms-transform:rotate(360deg); /* IE 9 */ 
-webkit-transform:rotate(360deg); /* Safari and Chrome */} 
}

источник

2013-08-16 14:01:45

Он отлично работает, не могли бы вы дать мне краткое объяснение того, что вы там делали. Большое спасибо. –

Конечно ... Я не касался вашего jQuery, это всего лишь анимация CSS, которая дополняет ваш jQuery. Начальное вращение 'transform: rotate (0deg)' установлено в div, а затем оно анимируется с использованием ключевых кадров ниже. Посмотрите на анимацию CSS для получения более подробной информации. –

Thansk миллион –

Я думаю, что вы можете использовать transform

transform:rotate(7deg);

Вы можете вращать в зависимости от степени rotate(7deg)

источник

2013-08-16 14:02:02

Как повернуть DIV, а Jquery одушевляет же DIV

ответ

Смежные вопросы