悬停时使用jQuery将div宽度从50％更改为70％ [英] Using jQuery to change div width from 50% to 70% on hover
问题描述
我有两个宽度各为50％的div。我想这样做是为了让占空比div扩大到70％，另一个减少到30％。当鼠标移出时，它们都返回到每个50％。我写了一个脚本，但没有给出正确的结果。宽度是流动的，所以他们需要适应所有的窗口大小。我怎样才能使这项工作正确？
我没有编写mouseout函数，因为mouseover无法正常工作。
以下是现在的运作方式：
http：/ /jsfiddle.net/kYZyp/
以下是我的代码：
< div id =leftclass =content_left>< / div>
< div id =rightclass =content_right>< / div>
这是我的css for div's
.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;
不透明度：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;
不透明度：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％，
b opacity：1
}，1500）;
$（＃left）。animate（{
width：30％
}，1500）;
}）;
< / script>
包括这个jQuery文件：
< script src =http://code.jquery.com/jquery-1.7rc2.js>< / script>
不知道这是否适合您： http://jsfiddle.net/yCY9y/3/
DOM：
< div id =wrapper>
< div id =leftclass =content_left> LEFT< / div>< div id =rightclass =content_right> RIGHT< / div>
< / div>
我使用包装来确保我们永远不会将下一行的权利分解。
CSS：
#wrapper {
width：100％;
overflow：hidden;
white-space：nowrap;
}
#left，#right {
display：inline-block;
宽度：50％;
}
#left {
background：red;
}
#right {
background：yellow;
}
我使用 #wrapper
white-space：nowrap; //更新的空格（打破下一行）
和
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％$ b $ 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）
我们将事件触发的元素抛出并发现所有父元素（ #wrapper ）childNodes： $（this）.parent（）。 children（）现在我们使用jQuery的 not 方法过滤掉匹配 this 的所有内容。 （ this = #left 或 #right ）witch is元素。现在我们有 #right - > #left 和 #left - > #right 。
$ b
mouseOutHandler 重置所有＃包装 childNodes的宽度为50％ 希望这可以让您找到正确的方法...
编辑：
如果您将动画链接/排队过期，可以使用 stop 方法将停止所有活动动画并清除队列：
$（selector）.stop（）。 animate（{
....
}）
I have two divs that have 50% width each. I want to make it so that the the hovered div expands to 70% and the other reduces to 30%. And when the mouse moves out, they both return to 50% each. I wrote a script but it doesn't give the right results. The widths are fluid so they need to adjust to all window sizes. how Can I make this work right?
I didn't write the mouseout function yet as the mouseover doesn't function correctly.
Here's how it works now: http://jsfiddle.net/kYZyp/
Here's my code:
<div id="left" class="content_left"></div>
<div id="right" class="content_right"></div>
Here's my css for the div's
.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;
}
And i'm using this script:
<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>
And including this jQuery file:
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
Doesn't know if this suites you: 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>
I use the wrapper to be sure we never break the RIGHT to the next line.
CSS:
#wrapper {
width:100%;
overflow:hidden;
white-space:nowrap;
}
#left, #right {
display:inline-block;
width: 50%;
}
#left {
background:red;
}
#right {
background:yellow;
}
I use on #wrapper
white-space:nowrap; // Newer break whitespaces (break to the next line)
and
width:100%;
On #left, #right we use:
display:inline-block;
witch is first compatible with >IE6. (hopes this is not a problem).
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 );
});
});
First i Bind the same mouseover and mouseout event on both #right and #left
$(selector).hover(mouseOverHandler, mouseOutHandler);
...
$(this).parent().children().not(this)
We take the element the event is fired throw and finds all it's parents (#wrapper) childNodes: $(this).parent().children() Now we filter out everything matching this using jQuery's not method. (this = #left OR #right) witch is the element. Now we have #right -> #left and #left -> #right.
The mouseOutHandler resets all of #wrapper childNodes's width to 50%
Hopes this leads you the right way...
EDIT:
If you are expiring your animation to chain / queue up use can use the stop method witch stop all active animations and clears the queue:
$(selector).stop().animate({
....
})
这篇关于悬停时使用jQuery将div宽度从50％更改为70％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
