Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   как анимировать действие? (https://javascript.ru/forum/misc/81688-kak-animirovat-dejjstvie.html)

StartGames 13.01.2021 16:52

как анимировать действие?
 
здравствуйте. есть действие:
$('#gl_img_{{ product.product_id }}c').html('<img src="{{ product.thumb2 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img1_{{ product.product_id }}c" />');


подскажите как его анимировать? Этот скрипт вставляет фото в блок при наведении, но он дергается в момент прогрузки фото.

пробовал вот так:
$('#gl_img_{{ product.product_id }}c').slideDown('normal');

но не срабатывает если блок открыт.

StartGames 13.01.2021 16:55

полный костыльный скрипт для лучшего понимания:

<div class="image">
        <a href="{{ product.href }}" id="gl_img_{{ product.product_id }}c">
            <img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-responsive" />
        </a>
        <div id="global_video_hover{{ product.product_id }}c" class="global_video_hover none">
            <div class="global_video_content">
            	<img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-responsive" />
                {{ product.video }}
            </div>
        </div>
    </div>

<div>
                <img src="{{ product.thumb2min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img1_{{ product.product_id }}c" />
            </div>
            <script>
                $('#ad_img1_{{ product.product_id }}c').hover(function() {
                    my_func2_{{ product.product_id }}c();
                });
                $('#ad_img1_{{ product.product_id }}c').click(function() {
                    my_func2_{{ product.product_id }}c();
                });
                function my_func2_{{ product.product_id }}c() {
                    $('#global_video_hover{{ product.product_id }}c').slideUp('normal');
                    $('#gl_img_{{ product.product_id }}c').slideDown('normal');
                    $('#gl_img_{{ product.product_id }}c').html('<img src="{{ product.thumb2 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img1_{{ product.product_id }}c" />');
                }
            </script>

рони 13.01.2021 17:05

StartGames,
может в css прописать background-image с нужным url или создайте картинку в скрипте

StartGames 13.01.2021 17:11

Цитата:

Сообщение от рони (Сообщение 532688)
StartGames,
может в css прописать background-image с нужным url или создайте картинку в скрипте

можно поподробнее про создания картинки в скрипте?

рони 13.01.2021 17:12

StartGames,
<style type="text/css">
    .test{
        background-image:  url({{ product.thumb2 }});
    }
    </style>
<script>
    var img = new Image;
    img.src = "{{ product.thumb2 }}"
</script>

StartGames 13.01.2021 17:20

спасибо


Часовой пояс GMT +3, время: 21:57.