Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 22.08.2018, 15:08
Аспирант
Отправить личное сообщение для oleg901 Посмотреть профиль Найти все сообщения от oleg901
 
Регистрация: 12.08.2018
Сообщений: 54

Спасибо за более качественный и оптимизированный код, но увы он не решает проблему с ускорения смены классов после многократного наведения и увода мышью. Смотрите если вы наведете мышкой на квадрат и уведете, потом повторите то смена цветов и затухание ускоряется А если быстро навести и увести(многократно), то вообще будет мигать без перерыва. Об этой проблеме я вам говорил
Ответить с цитированием
  #12 (permalink)  
Старый 22.08.2018, 19:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,187

oleg901,
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Документ без названия</title>
    <!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->

    <style type="text/css">
    .img1 {
            background-color: #7e6497;
    }

    .img2 {
            background-color: #d0ff00;
    }

    .img3 {
            background-color: #00c8ff;
    }

    .img4 {
            background-color: #001318;
    }

    #img {
            width: 200px;
            height: 200px;
            margin: auto;
            margin-top: 8%;
    }
    </style>
    <style type="text/css">
    header.c1 {
            background-position: 50% 18px;
    }
    </style>
</head>
<body>
    <div id='an'>
        <header id="img" role="banner" class="c1"></header>
    </div>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
    <script>
$(function() {
    var el = $("#img");
    var imgMass = ["img1", "img2", "img3", "img4"];
    var i = 0;
    var timer;
    el.addClass(imgMass[i]);

    function show() {
        window.clearTimeout(timer);
        el.removeClass(imgMass[i]);
        i++;
        if (i == imgMass.length) i = 0;
        el.addClass(imgMass[i]);
        el.animate({
            "opacity": "1"
        }, 800);
        timer = window.setTimeout(hide, 3E3)
    }

    function hide() {
        el.animate({
            "opacity": "0"
        }, 800, show)
    }
    show();
    el.mouseenter(function() {
        window.clearTimeout(timer);
        el.stop(true, false).css({
            "opacity": "1"
        })
    }).mouseleave(function() {
        el.stop(true, false);
        hide()
    })
});
    </script>
</body>
</html>
Ответить с цитированием
  #13 (permalink)  
Старый 22.08.2018, 20:50
Аспирант
Отправить личное сообщение для oleg901 Посмотреть профиль Найти все сообщения от oleg901
 
Регистрация: 12.08.2018
Сообщений: 54

Спасибо, профессор)
Ответить с цитированием
  #14 (permalink)  
Старый 22.08.2018, 20:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,187

oleg901,
лучше менять блоки а не background
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с скриптом слайда maxville Общие вопросы Javascript 1 27.08.2015 04:21
Слайд шоу, видеозаписи 123456789igor Общие вопросы Javascript 1 27.08.2012 15:03
проблема со скриптом m2broth Events/DOM/Window 5 27.10.2011 13:29
Проблема со скриптом в IE 8 Tok_13 jQuery 3 05.01.2010 11:12
проблема со слайд шоу, помогите пожалуйста. Ketch_Ozzy Общие вопросы Javascript 5 15.05.2009 22:34