transform and .animate()

@!Omega · Регистрация: 14.02.2010

Author24 — интернет-сервис помощи студентам

єсть 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); });

не могу понять почему?((((

@arto333 · 18.04.2013, 19:33

полный html код покажи пож

@!Omega · 18.04.2013, 22:07 **[ТС]**

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>

@arto333 · 19.04.2013, 00:33

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 и клики на себя берет),может во внешних скриптах где то переустанавливается обработчик клика. По крайней мере этот участок кода чист.

Новые блоги и статьи Все статьи Все блоги /
Агрегаты и сущности в DDD микросервисах Javaican 10.04.2025 Разработка современных программных систем часто приводит на распутье: монолит или микросервисы? Даже при выборе микросервисной архитектуры многие команды сталкиваются с проблемой правильного. . .	Многопоточность в C#: Task и параллельное программирование UnmanagedCoder 10.04.2025 Современные процессоры уже давно перестали наращивать тактовую частоту в пользу увеличения количества ядер. Это создало интересную ситуацию: разработчики, привыкшие к последовательному. . .	Линейное решение нелинейной задачи. Формулы от LM по моему решению пока не проверял. В итоговой её формуле видно её заблуждение. Hrethgir 10.04.2025 В продолжение Эта LM дала ответ похожий на нормальный. В комментриях мой комментарий - похоже она ошиблась с выведением итоговой формулы, но остальные проверю. Assistant qwen2. 5-14b-instruct . . . .	Переменные в Python py-thonny 10.04.2025 Переменная в программировании — это символическое имя, связанное с областью памяти, в которой хранится значение. Она позволяет получать доступ к данным через понятные человеку идентификаторы, а не. . .	Многопоточность в C#: Task и асинхронные операции UnmanagedCoder 10.04.2025 Многопоточность позволяет выполнять несколько операций одновременно, что важно для решения двух основных задач: повышения скорости выполнения вычислительно-сложных операций и сохранения отзывчивости. . .
Линейное решение не линейной задачи (емкость вычислений в сравнении с традиционными решениями пока не определена). Hrethgir 10.04.2025 В рамках предстоящих вычислений пришлось (да, я тоже знаю про корень числа, и про степеня, и прочие теоремы, но. . . ) найти способ нахождения отношения двух углов. . . .	Запуск контейнеров Docker на ARM64 Mr. Docker 09.04.2025 Появление таких решений, как Apple M1/ M2, AWS Graviton, Ampere Altra и Raspberry Pi, сделало использование ARM-систем обыденностью для многих разработчиков и DevOps-инженеров. При этом Docker,. . .	Vue SFC компонент на PHP с Fusion Jason-Webb 09.04.2025 PHP на сервере и JavaScript на клиенте — классическое сочетание, которое, несмотря на свою эффективность, создает определенный когнитивный диссонанс при разработке. В этом контексте появляются. . .	TypeScript vs JavaScript: Отличия и когда что использовать Reangularity 09.04.2025 JavaScript появился в 1995 году как творение Брендана Эйха и быстро стал основой интерактивности в вебе. За свою историю он прошел путь от простого языка для манипуляций с DOM до полноценной. . .	Подключение Kafka к Elasticsearch Codd 09.04.2025 Apache Kafka и Elasticsearch — две мощные технологии, которые при совместном использовании создают эффективную платформу для обработки и анализа данных в реальном времени. Kafka, выступая в роли. . .

@arto333 26 / 16 / 2 Регистрация: 13.03.2013 Сообщений: 36
	18.04.2013, 19:33
	полный html код покажи пож 0