Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.01.2021, 16:52
Аспирант
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 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');

но не срабатывает если блок открыт.
Ответить с цитированием
  #2 (permalink)  
Старый 13.01.2021, 16:55
Аспирант
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 52

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

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 13.01.2021, 17:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,550

StartGames,
может в css прописать background-image с нужным url или создайте картинку в скрипте
Ответить с цитированием
  #4 (permalink)  
Старый 13.01.2021, 17:11
Аспирант
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 52

Сообщение от рони Посмотреть сообщение
StartGames,
может в css прописать background-image с нужным url или создайте картинку в скрипте
можно поподробнее про создания картинки в скрипте?
Ответить с цитированием
  #5 (permalink)  
Старый 13.01.2021, 17:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,550

StartGames,
<style type="text/css">
    .test{
        background-image:  url({{ product.thumb2 }});
    }
    </style>
<script>
    var img = new Image;
    img.src = "{{ product.thumb2 }}"
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 13.01.2021, 17:20
Аспирант
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 52

спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JSON как хранить как парсить jay-S Общие вопросы Javascript 1 26.05.2017 08:50
Как лучше анимировать элемент? monax_111 jQuery 1 02.12.2014 12:44
Как отменить действие правой кнопки мыши? Dimaz Events/DOM/Window 2 20.07.2014 13:05
Мотоциклисты есть? l-liava-l Оффтопик 13 04.07.2014 13:35
Как сохранить действие? AquaGen Общие вопросы Javascript 10 25.01.2012 19:19