jQuery изменить размер окна div при наведении - PullRequest
Новая
       25

jQuery изменить размер окна div при наведении

1 голос
/ 18 апреля 2011

У меня есть две части кода, чтобы сделать 3 вещи:

  • изменить размер за один раз только один из 6 .box Div (с его текстовым содержимым)
  • сделать прозрачные .box div, которые не выбраны
  • показать скрыт .more span

КОД: 

    $('.content_area div').hide();

        $(function(){
            $('.box').bind('mouseover',function() {
                $(this).addClass('up');
                $('.box').not('.up').fadeTo('normal',0.2);
            });
            $('.box').bind('mouseout',function() {
                $('.box').removeClass('up').fadeTo('normal',1);
            });
        });

        initwidth = $('.box').width();
        initHeight = $('.box').height();

        $('.box').hover(function(){
            $(this).children('.more').show();
            $(this).stop().animate({width: '220', height: '140'},{queue:false, duration:'fast'}).css('font-size', '1.2em');
        }, function(){
            $(this).children('.more').hide();
            $(this).stop().animate({width: initwidth, height: initHeight},{queue:false, duration:'fast'}).css('font-size', '1em');
        });

Но что-то не так. Только первая из коробок работает довольно хорошо, но она не закрывает другие коробки при изменении размера.

Эффект от этого Вы можете увидеть здесь: jsFiddle

И мой вопрос: возможно ли унифицировать этот код и заставить его работать? : - [

1 Ответ

2 голосов
/ 18 апреля 2011

Ваш код очень запутан.Я выгляжу так, как будто ты сложил это вместе.К сожалению, у вас нет времени, чтобы почистить его для вас, поэтому вот несколько общих советов:

  • Для одного .hover() делает то же самое, что и для связывания mouseover и mouseout,поэтому у ваших ящиков не должно быть двух обработчиков для одинаковых событий.Также вы связываете одно в событии готовности документа, а другое - нет, что не согласовано.
  • Вам нужно будет добавить stop() s к анимации затемнения и (отмены) затемнения, поскольку ваша очередь увеличивается и сохраняетсясобирается.Прочитайте документацию , потому что вам, скорее всего, понадобится установить параметры clearQueue и jumpToEnd.
  • Сдвиг блоков, поскольку вы их перемещаете.Вместо этого используйте абсолютное позиционирование (обратите внимание на его недостатки!)

ОБНОВЛЕНИЕ: я отредактировал ваш код: http://jsfiddle.net/Puuxj/7/

Мои изменения:

  • Удалил класс hover и использовал вместо него .not(this).(Если класс не нужен для чего-то еще ...)
  • Добавлены параметры в .stop().
  • Используется mouseenter / mouseleave вместо mouseover / mouseout.
  • Расположены элементы абсолюта
...