Использование jQuery для изменения ширины div с 50% до 70% при наведении - PullRequest
Новая
       30

Использование jQuery для изменения ширины div с 50% до 70% при наведении

4 голосов
/ 04 ноября 2011

У меня есть два div, которые имеют ширину 50% каждый. Я хочу сделать так, чтобы колеблющийся div увеличивался до 70%, а другой - до 30%. И когда мышь выдвигается, они оба возвращаются к 50% каждый. Я написал сценарий, но он не дает правильных результатов. Ширина является плавной, поэтому их необходимо подбирать под все размеры окон. Как я могу сделать эту работу правильно?

Я еще не написал функцию отключения мыши, так как наведение мыши работает неправильно.

Вот как это работает сейчас: http://jsfiddle.net/kYZyp/

Вот мой код: 

<div id="left" class="content_left"></div>
<div id="right" class="content_right"></div>

Вот мой CSS для Div 

.content_left {
    width:50%;
    top:0px;
    left:0px;
    bottom:0px;
    background:url(wedding.jpg) left center no-repeat;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

.content_right {
    width:50%;
    top:0px;
    right:0px;
    bottom:0px;
    background:url(events.jpg) right center no-repeat;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

И я использую этот скрипт: 

<script>
$("#left").mouseover(function(){
  $("#left").animate({
    width: "70%",
    opacity: 1
  }, 1500 );
  $("#right").animate({
    width: "30%"
  }, 1500 );
});

$("#right").mouseover(function(){
  $("#right").animate({
    width: "70%",
    opacity: 1
  }, 1500 );
  $("#left").animate({
    width: "30%"
  }, 1500 );
});

</script>

И включая этот файл jQuery: 

<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>

Ответы [ 3 ]

7 голосов
/ 04 ноября 2011

Не знает, подходит ли вам это: http://jsfiddle.net/yCY9y/3/

DOM: 

<div id="wrapper">
    <div id="left" class="content_left">LEFT</div><div id="right" class="content_right">RIGHT</div>
</div>

Я использую обертку, чтобы быть уверенным, что мы никогда не нарушим ПРАВО на следующую строку.

CSS: 

#wrapper {
    width:100%;
    overflow:hidden;
    white-space:nowrap;
}
#left, #right {
    display:inline-block;
    width: 50%;
}
#left {
    background:red;
}
#right {
    background:yellow;
}

Я использую на #wrapper

white-space:nowrap; // Newer break whitespaces (break to the next line)

и 

width:100%;

На #left, #right мы используем: 

display:inline-block;

Ведьма сначала совместима с> IE6. (надеется, что это не проблема).

JS: 

$("#left, #right").each(function() {
    $(this).data("standardWidth", $(this).width());
});

$("#left, #right").hover(function() {
    $(this).animate({
        width: "70%"
    }, 300 );
    $(this).parent().children().not(this).animate({
        width: "30%"
    }, 300 );
}, function() {
    $(this).parent().children().each(function() {
        $(this).animate({
            width: $(this).data("standardWidth")
        }, 300 );
    });
});

Сначала я связал одно и то же событие mouseover и mouseout на #right и #left

$(selector).hover(mouseOverHandler, mouseOutHandler);

... 

$(this).parent().children().not(this)

Мы берем элемент, который вызывает событие throw, и обнаруживают все его родители (#wrapper) childNodes: $(this).parent().children() Теперь мы отфильтровываем все, что соответствует this, с помощью метода not jQuery. (this = #left ИЛИ #right) ведьма - это элемент. Теперь у нас есть #right -> #left и #left -> #right.

mouseOutHandler сбрасывает всю ширину #wrapper childNodes на 50%

Надеюсь, что это приведет вас на правильный путь ...

EDIT:

Если срок действия анимации истекает для использования в цепочке / очереди, можно использовать метод stop, который останавливает все активные анимации и очищает очередь: 

$(selector).stop().animate({
    ....
})
2 голосов
/ 04 ноября 2011

Это должно хорошо работать для вас: 

<script type="text/javascript">
    $(function(){
        $("#div1").hover(
            function(){
               $(this).css("width", "70%"); 
            },
            function(){
                $(this).css("width", "50%");
            }
        );                             
    });
</script>

РЕДАКТИРОВАТЬ : добавлена ​​анимация РЕДАКТИРОВАТЬ : добавлено изменение размера по высоте для анимации 

<script type="text/javascript">
    $(function(){
        $("#div1").hover(
            function(){
                $(this).animate({ "width" : "70%", "height" : $("#container").height() + "px" }); 
            },
            function(){
                $(this).animate({ "width" : "50%", "height" : "" });
            }
        );                             
    });
</script>
<div id="container" style="height:400px;border:1px solid #000;padding:10px;">
    <div id="div1" style="width:50%;border:1px solid #000;min-height:100px;">
        Hello world!
    </div>
</div>

РЕДАКТИРОВАТЬ : если вы хотите, чтобы он заполнял высоту окна, просто используйте window.innerHeight вместовысота контейнера: 

<script type="text/javascript">
    $(function(){
        $("#div1").hover(
            function(){
                $(this).animate({ "width" : "70%", "height" : window.innerHeight + "px" }); 
            },
            function(){
                $(this).animate({ "width" : "50%", "height" : "" });
            }
        );                             
    });
</script>
<div id="div1" style="width:50%;border:1px solid #000;min-height:100px;">
    Hello world!
</div>

Вот jsFiddle , который демонстрирует его работу.

0 голосов
/ 04 ноября 2011

Чтобы взять @ Джеймс 'ответ (+1) и добавить анимацию, просто используйте .animate(): 

$(function(){
    $("#div1").hover(
        function(){
           $(this).animate({width: '70%'});
        },
        function(){
            $(this).animate({width: '50%'});
        }
    );                            
});

Демо: http://jsfiddle.net/mattball/sAW2c/

...