14 / 14 / 3
Регистрация: 14.02.2010
Сообщений: 293
1

transform and .animate()

18.04.2013, 17:28. Показов 10534. Ответов 3
Метки нет (Все метки)

єсть DIV с ид c_sh
вот стиль к нему:
#c_sh
CSS
1
2
3
4
5
6
7
8
9
10
11
{
height:100px;
width:100px;
    left: -58px;
    top: 198px;
    transform: rotate(60deg);
    -ms-transform: rotate(60deg); /* IE 9 */
    -moz-transform: rotate(90deg); /* Firefox */
    -webkit-transform: rotate(60deg); /* Safari and Chrome */
    -o-transform: rotate(60deg); /* Opera */
}
при клике на него хочу его развернуть...
использую плагин: jquery.transform.js
вот так работает:
Javascript
1
$('#c_sh').click(function () { $('#c_sh').animate({ transform: 'rotate(0deg)'}, 2000); }).trigger('click');
а вот так НЕ работает:
Javascript
1
$('#c_sh').click(function () { $('#c_sh').animate({ transform: 'rotate(0deg)'}, 2000); });
не могу понять почему?((((
__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.04.2013, 17:28
Ответы с готовыми решениями:

Round меняет transform: scale, а ещё animate.css не работает внизу страницы
http://neorix.ru/ В общем внизу в блоке "Портфолио" при наведении мышкой блок меняет размер, но...

Ng animate
Здравствуйте, вот тут пример с is visible у меня не работает даже с копи пастом...

animate()
что у меня неправильного?<html> <head> <title> jquery </title> <script...

.animate();
Доброго времени суток! Никак не могу разобраться с этим эффектом. По существу: есть блок...

3
26 / 16 / 2
Регистрация: 13.03.2013
Сообщений: 36
18.04.2013, 19:33 2
полный html код покажи пож
0
14 / 14 / 3
Регистрация: 14.02.2010
Сообщений: 293
18.04.2013, 22:07  [ТС] 3
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Script/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="Script/jquery.transform.js"></script>
    <script type="text/javascript" src="Script/MyScript.js"></script>
    <link type="text/css" href="Style/center.css" rel="Stylesheet" />
    <link type="text/css" href="Style/work_experience.css" rel="Stylesheet" />
    <script type="text/javascript" src="Script/work_experience.js"></script>
</head>
<body>
    <div id="head">
    </div>
    <div id="center">
        <div id="img_top">
        </div>
        <div id="content">
            <div>
                <div id="work_exp">
                    <div id="circle">
                        <span>Front-end</span></div>
                    <div id="html">
                        HTML</div>
                    <div id="css">
                        CSS</div>
                    <div id="js">
                        JavaScript</div>
                        <div id="c_sh">
                        C#</div>
                </div>
                <div id="info_work_exp">
               
                </div>
            </div>
        </div>
        <div id="img_bottom">
        </div>
    </div>
</body>
</html>
0
26 / 16 / 2
Регистрация: 13.03.2013
Сообщений: 36
19.04.2013, 00:33 4
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jquery.transform2d.js"></script>
    <style type="text/css">
        #c_sh{
            height:100px;
            width:100px;
            left: -58px;
            top: 198px;
            transform: rotate(60deg);
            -ms-transform: rotate(60deg); /* IE 9 */
            -moz-transform: rotate(90deg); /* Firefox */
            -webkit-transform: rotate(60deg); /* Safari and Chrome */
            -o-transform: rotate(60deg); /* Opera */
        }
    </style>
</head>
<body>
<div id="head">
</div>
<div id="center">
    <div id="img_top">
    </div>
    <div id="content">
        <div>
            <div id="work_exp">
                <div id="circle">
                    <span>Front-end</span></div>
                <div id="html">
                    HTML</div>
                <div id="css">
                    CSS</div>
                <div id="js">
                    JavaScript</div>
                <div id="c_sh">
                    C#</div>
            </div>
            <div id="info_work_exp">
 
            </div>
        </div>
    </div>
    <div id="img_bottom">
    </div>
</div>
<script type="text/javascript">
    $('#c_sh').click(function () { $('#c_sh').animate({ transform: 'rotate(0deg)'}, 2000); });
</script>
</body>
</html>
Вот так точно работает везде. Проблема явно в остальном коде. Может в стилях(например другой блок неявно перекрывает твой div и клики на себя берет),может во внешних скриптах где то переустанавливается обработчик клика. По крайней мере этот участок кода чист.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
19.04.2013, 00:33
Помогаю со студенческими работами здесь

Animate scale
Подскажите плиз, как задать начальное значение для transform scale в методе animate ? В примере...

Animate и классы
Через animate, возможно указать свойство и его значение и соответственно сделать анимацию. Вопрос в...

Animate не работает
Помогите пожалуйста У меня на этой странице http://dsc-pride.ru/ в хедере есть меню, при наведении...

Не работает animate
Вот этот код не работает, не пойму почему: &lt;script type=&quot;text/javascript&quot;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru