Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 08.12.2009, 01:24
Аспирант
Отправить личное сообщение для Urfin Посмотреть профиль Найти все сообщения от Urfin
 
Регистрация: 22.07.2009
Сообщений: 85

Вот вариант решения анимации бэкграунда.
Кстати, subzey, как Вы делаете, чтобы примеры в сообщении отображались?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div id="my" style="height: 76px; width:336px; background: crimson; position:relative; z-index:0;">
	<div style="position:relative; z-index:2;">Наведите на этот див</div>
	<div id="bg" style="position:absolute; z-index:1; background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif); width:336px; height:76px; top:0; left:0; display:none;"
</div>
<script>
$("#my").hover(
    function(){
        $('#bg').stop(true,true).fadeIn();
    },
    function(){
        $('#bg').stop(true,true).fadeOut();
    }
);
</script>

Последний раз редактировалось Urfin, 28.10.2010 в 17:54.
Ответить с цитированием
  #12 (permalink)  
Старый 08.12.2009, 01:51
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Urfin,
http://javascript.ru/formatting
Ответить с цитированием
  #13 (permalink)  
Старый 08.12.2009, 01:55
Аспирант
Отправить личное сообщение для Urfin Посмотреть профиль Найти все сообщения от Urfin
 
Регистрация: 22.07.2009
Сообщений: 85

subzey, ОК, спасибо.
Ответить с цитированием
  #14 (permalink)  
Старый 23.05.2010, 15:33
Аватар для pilot
Интересующийся
Отправить личное сообщение для pilot Посмотреть профиль Найти все сообщения от pilot
 
Регистрация: 13.08.2009
Сообщений: 16

Цитата:
$(this).animate({background-image:'url(images/round2.gif)'});
если пытаешься через animate, то как известно библиотека изначально не способна анимировать бэкграунд, но это решается посредством установки плагина
http://plugins.jquery.com/project/color
Ответить с цитированием
  #15 (permalink)  
Старый 06.08.2010, 21:49
Новичок на форуме
Отправить личное сообщение для Vivat Посмотреть профиль Найти все сообщения от Vivat
 
Регистрация: 06.08.2010
Сообщений: 5

А может есть код какой-нибудь который может плавно класс элемента сменить? Или плавный hover...

Что-то типа : <a class="portfolio" href="#"></a>

.portfolio {
background:url(../images/menu.png) no-repeat 0 0;
}

.portfolio:hover {
background-position: 0 -40px;
}

Нужно что б изображение плавно менялось просто...
Знает кто?
Ответить с цитированием
  #16 (permalink)  
Старый 06.08.2010, 22:00
Аспирант
Отправить личное сообщение для digital_sword Посмотреть профиль Найти все сообщения от digital_sword
 
Регистрация: 20.08.2009
Сообщений: 34

animate. Плавно меняет стиль элемента.
Ответить с цитированием
  #17 (permalink)  
Старый 06.08.2010, 22:09
Новичок на форуме
Отправить личное сообщение для Vivat Посмотреть профиль Найти все сообщения от Vivat
 
Регистрация: 06.08.2010
Сообщений: 5

Спасибо что ответили. Дело в том что я не знаю jquery

Мне бы какой-нибудь пример <script type='text/javascript'></script>
Ответить с цитированием
  #18 (permalink)  
Старый 06.08.2010, 22:27
Новичок на форуме
Отправить личное сообщение для Vivat Посмотреть профиль Найти все сообщения от Vivat
 
Регистрация: 06.08.2010
Сообщений: 5

Я так понимаю
<script type="text/javascript">
$('#menu').hover(function() {
$('.portfolio').animate({
opacity: 0.25,
}, 1000, function() {
});
});

Только что написать нада что б плавно менялся класс элемента?

Или так:
<script type="text/javascript">
$('#menu').hover(function() {
$('.portfolio').animate(
{ background-position: 0 -40px;
}, 1000, function() {
});
});
</script>

Но так не получается что-то...

Столько всего про этот jquery а элементарно hover анимированным сделать нужно лазить по всему интернету и еще ничего не найти )

Последний раз редактировалось Vivat, 06.08.2010 в 22:53.
Ответить с цитированием
  #19 (permalink)  
Старый 06.08.2010, 23:24
Аватар для pilot
Интересующийся
Отправить личное сообщение для pilot Посмотреть профиль Найти все сообщения от pilot
 
Регистрация: 13.08.2009
Сообщений: 16

Vivat плавно класс поменять не выйдет...Тебе нужно просто поменять стиль, через animate или fadeIn/Out или sladeDown/Up
$('#menu').hover(function() {
$('.portfolio').animate(
{ background-position: 0 -40px;
}, 1000, function() {
});
});

если ты пытаешься сместить бекграунд, включи логику. Тебе нужно смещать марджин за какое-то количество секунд, например:
$('.portfolio').animate({marginLeft: 40px},1000)
И ровно за 1 секунду твой бекграунд сместится(плавно) на 40 пикселей вправо.
Ответить с цитированием
  #20 (permalink)  
Старый 06.08.2010, 23:34
Новичок на форуме
Отправить личное сообщение для Vivat Посмотреть профиль Найти все сообщения от Vivat
 
Регистрация: 06.08.2010
Сообщений: 5

Хорошо а как fadeIn/Out написать?

тогда .portfolio:hover переименую на .portfolio-hover и уже не селектор а класс получился.

у меня такой html:
<div class="menu">
<a class="portfolio" href="#"></a>
<a class="services" href="#"></a>
<a class="contacts" href="#"></a>
</div>

мне для каждого a элемента надо сделать fadeIn/Out

Это как-то так:
<script type="text/javascript">
$('.portfolio').hover(function() {
$('.portfolio').animate({fadeIn/Out},1000)
})
$('.services').hover(function() {
$('.services').animate({fadeIn/Out},1000)
})
})
</script>
Да?

У каждого класса изображение фона по разному сдвигается

Последний раз редактировалось Vivat, 06.08.2010 в 23:45.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery - Как получить полный путь? kirill.adw jQuery 5 20.11.2009 17:40
JQuery + FireFox NOOB jQuery 4 02.11.2009 18:16
Как правильно подгрузить jQuery Siton jQuery 4 15.06.2009 09:54
Сложный случай jQuery + AJAX + динамическое изменение страницы Opera/IE no. Общие вопросы Javascript 2 24.02.2009 04:24
background image, справочник igor1102828 Элементы интерфейса 2 23.03.2008 18:53