Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 18.10.2012, 23:23   #1
Иванна
Пользователь
 
Регистрация: 03.02.2011
Сообщений: 38
По умолчанию Плавная смена изображений по наведению

Подскажите, пожалуйста, как к этому коду добавить анимацию?

Код:
<script type="text/javascript">
		jQuery(document).ready(function(){
		$(".red-left").hover(function() {
			$('#content').css('background','url("/images/tpl-3in1/table1.jpg") no-repeat scroll center top transparent');
		});	
		$(".red-center").hover(function() {
			$('#content').css('background','url("/images/tpl-3in1/table2.jpg") no-repeat scroll center top transparent');
		});	
		$(".red-right").hover(function() {
			$('#content').css('background','url("/images/tpl-3in1/table3.jpg") no-repeat scroll center top transparent');
		});	
	});
	</script>
Нужно чтобы при наведении на блоки .red-left, .red-center, .red-right плавно менялись фоновые изображения в блоке #content

Сейчас это выглядит так , но из-за большого размера изображений, они долго подгружаются и выглядит это некрасиво. Наводить нужно на "Сайт специалиста", "Сайт компании", "Интернет-магазин" - будет меняться изображение с чашками.

Я пробовала написать так
Код:
<script type="text/javascript">
            $(document).ready(function(){
                $(".red-left").hover(function() {
				$('#content').stop().animate({background:'url(/images/tpl-3in1/table1.jpg) no-repeat scroll center top transparent'},800);
                }),$(".red-center").hover(function() {
                $('#content').stop().animate({background:'url(/images/tpl-3in1/table2.jpg) no-repeat scroll center top transparent'},800);
                }),$(".red-right").hover(function() {    
				$('#content').stop().animate{background:'url(/images/tpl-3in1/table3.jpg) no-repeat scroll center top transparent'},800);
				});
         });
</script>
Но скрипт оказался нерабочим вообще. Что в нем не так?
Иванна вне форума Ответить с цитированием
Старый 19.10.2012, 02:53   #2
rlib
Форумчанин
 
Аватар для rlib
 
Регистрация: 22.05.2012
Сообщений: 352
По умолчанию

Чем вам не нравятся готовые слайд-шоу jquery плагины? Например, http://jquery.malsup.com/cycle/
rlib вне форума Ответить с цитированием
Старый 19.10.2012, 07:10   #3
snippet
Пользователь
 
Регистрация: 17.10.2012
Сообщений: 37
По умолчанию

Есть вот такие автоматические штуковины как раз на jQuery.

Код HTML:
$(".red-left").fadeToggle()
Код HTML:
$(".red-left").slideToggle()
Если можно, дайте ссылку на сайт. Или опишите что хотите видеть поподробнее.
http://dev-snippet.com
snippet вне форума Ответить с цитированием
Старый 19.10.2012, 07:16   #4
snippet
Пользователь
 
Регистрация: 17.10.2012
Сообщений: 37
По умолчанию

А! Так делайте спрайты!

Создайте картинку на которой будут все необходимые картинки, и двигайте их background-position: 10px 0; к примеру. Тогда ничего грузиться не будет.
http://dev-snippet.com
snippet вне форума Ответить с цитированием
Старый 19.10.2012, 16:29   #5
Free_den
Пользователь
 
Регистрация: 08.03.2012
Сообщений: 36
По умолчанию

Цитата:
делайте спрайты
Либо предварительно (до запуска анимации )кешируйте все картинки, которые участвуют в анимации. Как это сделать посмотрите здесь
Все гениальное - просто...
Free_den вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавная смена обоев(как в windows 7) rokweb Общие вопросы Delphi 16 13.05.2012 22:46
Плавная смена изображений hamsidJ JavaScript, Ajax 1 10.01.2012 23:11
Плавная смена картинок в нескольких местах JavaScript BattlePingvin Помощь студентам 0 15.12.2011 20:57
Jquare, плавная смена картинок Gorychev JavaScript, Ajax 1 25.08.2010 07:01
Плавная смена картинок dedyshka JavaScript, Ajax 1 21.03.2010 13:38