Анимация движущегося изображения, которая связана с Jquery?

Question

Мне интересно, возможно ли вообще создать анимацию Jquery с изображением, которое можно связать?Я огляделся вокруг, но до сих пор мне не повезло найти что-то, что я мог бы поиграть с кодировкой, чтобы получить желаемый эффект, который я ищу, или плагин.

В основном то, что я хочу сделатьУ него есть «вкладки» на левой стороне макета, который я сейчас разрабатываю, который «вытащит», когда вы наводите курсор мыши на них и ссылаетесь на страницу.В настоящее время я разработал эти вкладки графически как часть дизайна макета, хотя, если бы блоки кодирования располагались прямо там, где граница макета была бы более выполнимой, я готов это сделать.

Чтобы быть болееВ частности, в отношении анимации, которую я пытаюсь достичь, я хочу анимировать ее, поэтому создается впечатление, что вы «вытягиваете» вкладку, когда наводите на нее курсор мыши, в то время как другие вкладки остаются неподвижными.Затем, когда вы перемещаете курсор, чтобы сказать, что вкладка под ней (или другая вкладка), вытащенная вкладка вернется к своему «исходному размеру», и новая вкладка будет вытянута, как первая.Мне бы очень хотелось, чтобы анимация вернула исходную вкладку обратно, пока новая вкладка выдвигается, но меня устраивает только анимация извлечения вкладки, а исходная вкладка просто «возвращает» обратно в исходное состояние.Я знаю, что есть кодирование и функции только для обмена изображениями, но опять же я не смог найти какие-либо функции, кодирование или плагины для такого рода анимации, которые можно было бы щелкнуть / связать с изображением.

Все, что угодно ввсе, даже "такая вещь не выполнима" была бы оценена.Я ищу, чтобы выяснить, возможно ли это и как я могу этого достичь, будь то, какие плагины могут это делать, функции, кодирование, учебные пособия, которые похожи, или другие формы кодирования / программирования веб-сайтов, которые могли бы достичь этого.Опять же, если это не выполнимо с изображениями, я буду в порядке с способами сделать это с ссылками блока.

Я довольно комфортно с HTML и CSS, но Jquery - довольно новая область, я все ещеобучение в.

Answer 1

Это легко выполнимо.

HTML

<ul>
    <li><a href="/about">about</a></li>
    <li><a href="/contact">contact</a></li>
</ul>

CSS

ul {
   width: 300px;
   position: relative;
   overflow: hidden;
}

ul li {
   width: 300px;
   position: absolute;
   left: -280px;
   background: url(/images/li-background.png) no-repeat;
}

Это предполагает, что 20px в крайнем правом углу ваших вкладок - это бит, который являетсявсегда отображается.

jQuery

$(function() {

    $('ul li').hover(function() {
        $(this).stop().animate({ left: 0 }, 100);
    }, function() {
        $(this).stop().animate({ left: -280 }, 100);
    });

});

Всякий раз, когда мне нужно использовать jQuery hover(), я использую hoverIntent().Этот плагин предотвращает запуск событий всплывающих подсказок, если пользователь просто случайно наводит курсор на элемент.

Также имейте в виду, что у сенсорных устройств нет события наведения мыши.Вам нужно убедиться, что они работают правильно.

Answer 2

Вы можете обратиться к API анимации jQuery здесь. Это должно соответствовать тому, что вы хотите сделать.

http://api.jquery.com/category/effects/