JQuery парить с тремя div - PullRequest
Новая
       20

JQuery парить с тремя div

4 голосов
/ 01 февраля 2010

Я использую этот код div fadeTo из здесь, , который затухает в одном из двух div, в зависимости от наведения.

Что бы я хотел сделать, это добавить третью опцию - и третий div с именем #maindiv - таким образом: «Если вы наводите курсор на #maindiv, не затушевывайте ни #sidebar, ни #primarycontainter, но если вы наводите курсор на #sidebar или #primarycontainter, затем затухание любого из них (в зависимости от наведения), но не затухание #maindiv. "

Как бы я это сделал (с другим оператором else?), Сохранив существующий оператор else, который не позволяет IE6 использовать какой-либо код? Спасибо ....

Редактировать 3/3/10: Есть ли другой метод обработки этого из-за трех дел? Требуется ли обратный вызов или каким-либо образом обновить функцию, поскольку приведенный ниже код приводит к несогласованному действию fadeTo? 

$(document).ready(function(){

    if ($.browser.version = jQuery.browser.msie &&
        parseInt(jQuery.browser.version) == 6) {
    } else {

        $("#sidebar").fadeTo('fast', 0.5);
        $("#sidebar").hover(function(){
                $(this).stop().fadeTo('fast', 1);
                $("#primarycontainer").stop().fadeTo('fast', 0.5);
            },function(){
                $(this).stop().fadeTo('fast', 0.5);
                $("#primarycontainer").stop().fadeTo('fast', 1);
            }
        );
    }
});

Изменить 2.09.10:

Ответ Эда Вудкока, приведенный ниже, работает, с небольшими изменениями (по моему выбору) в моих комментариях к его ответу.

Это вопрос CSS: 

<body>

<div id="outerdiv" div style="position: relative;">

<div id="maindiv" div style="position:relative;">Lorem ipsum dolor sit amet.</div>

<div id="content">      

<div id="primary" div style="float: left; margin-right: -20.0em; width: 100%;">
<div id="primarycontainer" div style="margin-right: 16.0em;">

<p>Lorem ipsum dolor sit amet.<p>

</div></div>

<div id="sidebar" div style="float: right; width: 15.0em;">Lorem ipsum dolor sit amet.</div>

</div></div>

</html>
</body>

Ответы [ 3 ]

5 голосов
/ 04 февраля 2010

Это должно сработать, это вряд ли элегантно, но не должно быть слишком сложно его улучшить: 

    $(document).ready(function() {

        if ($.browser.version = jQuery.browser.msie &&
    parseInt(jQuery.browser.version) == 6) {
        } else {
            $("#sidebar").fadeTo('fast', 0.5);
            $("#maindiv").hover(function() {
                /// The below line is what I just changed, putting the fadeTo() value
                /// to 0.5 causes the divs to fade out to be translucent.
                $("#primarycontainer,#sidebar").stop().fadeTo('fast', 0.5);
            }, function() {
                $("#sidebar").stop().fadeTo('fast', 0.5);
                $("#primarycontainer").stop().fadeTo('fast', 1);
            });

            $("#sidebar").hover(function() {
                $(this).stop().fadeTo('fast', 1);
                $('#primarycontainer').stop().fadeTo('fast', 0.5);
            }, function() {
                $(this).stop().fadeTo('fast', 0.5);
                $('#primarycontainer').stop().fadeTo('fast', 1);
            });
        }
    });

EDIT

Хорошо, у меня такое чувство, что вы здесь неправильно сообщили о своих намерениях:

Этот код будет:

  • Fade #sidebar и #primarycontainer поочередно при наведении, при этом контейнер, который будет зависать, становится полностью непрозрачным, а div, который не перемещается, становится прозрачным.
  • Сделать # sidebar полупрозрачным, когда ничего не зависает
  • Сделать и #sidebar, и #primarycontainer полностью непрозрачными, когда #maindiv наведен на

если это не то, чего вы пытаетесь достичь, измените вопрос немного, и я отсортирую код, чтобы выполнить то, что вы спрашиваете. Что касается странного поведения #maindiv, то, скорее всего, это изюминка в вашем html или css, код jQuery верный.

1 голос
/ 08 февраля 2010

Не очень сложно, но работает (если я хорошо понимаю ваше желание): 

$("#maindiv").hover(function(){
          $("#primarycontainer, #sidebar").stop().fadeTo('fast', 1);
        },function(){

          $("#sidebar").bind('mouseover',function(){
            $(this).stop().fadeTo('fast', 1);
            $("#primarycontainer").stop().fadeTo('fast', 0.5);
          });

          $("#primarycontainer").bind('mouseover',function(){
            $(this).stop().fadeTo('fast', 1);
            $("#sidebar").stop().fadeTo('fast', 0.5);
          });
        });
1 голос
/ 01 февраля 2010 
$(document).ready(function(){

    if ($.browser.version = jQuery.browser.msie &&
        parseInt(jQuery.browser.version) == 6) {
    } else {

        // Set up hover behavior for #maindiv
        // When #maindiv is hovered, it will effect both 
        // #primarycontainer & #sidebar

        $("#maindiv").hover(function(){
                $("#primarycontainer,#sidebar").fadeTo('fast', 0.5);
            },function(){
                $("#primarycontainer,#sidebar").fadeTo('fast', 1);
            }
        );

        // Set up hover behaviors for #primarycontainer & #sidebar
        // When either #primarycontainer or #sidebar is hovered
        // it will effect the element which is being hovered

        $("#primarycontainer,#sidebar").hover(function(){
                $(this).fadeTo('fast', 0.5);
            },function(){
                $(this).fadeTo('fast', 1);
            }
        );
    }
});
...