推其他divs到右边

我试图滑动一个div然后移动3个其他divs。我有小提琴表明我想怎么做。但它不是100％正确的。推其他divs到右边

如果你检查小提琴，你会看到它在你按“按下我”时滑动。但是，我不想通过3个红色的div，而是想把它推到一边。

HTML

<div class="wrapper wrapper-content"> 

<div class="container" style="position:relative"> 
<div id="effectMenu"></div> 
<div id="red"><a href="#" id="toggle-menu">Press Me</a></div> 
<div id="red"></div> 
<div id="red"></div> 

</div> 
</div>

CSS

#red { 
    background-color:red; 
    height:50px; 
    margin-top: 2px; 
    width: 100px; 
    position:relative; 
} 

#effectMenu 
{ 
    display: none; 
    background: grey; 
    color: #FFF; 
    width:30px; 
    position:absolute; 
    height:100%; 
    z-index:1; 
} 

.container { 
    border: 2px solid #73AD21; 
    width:100px; 
}

脚本

$(function() 
    { 
    $("a#toggle-menu").click(function() 
         { 
          $("#effectMenu").animate({width:'toggle'},350); 
          return false; 
         }); 
    });

来源

2016-06-01 IdontwearString

不理解你的要求。请妥善解释一下 –

你见过小提琴吗？它几乎可以解释这一切。而不是div滑过3个红色的div。我想要它推开3个红色的div。 – IdontwearString

你没有滑动任何东西，只是动画div的宽度。 –

更改ID的一类，拨动类的项目名为left，在CSS中动态添加使用css转换的类的转换

<div class="container" style="position:relative"> 
    <div id="effectMenu"></div> 
    <div class="red"><a href="#" id="toggle-menu">Press Me</a></div> 
    <div class="red"></div> 
    <div class="red"></div> 

    </div> 
</div> 
$(function() { 
    $("a#toggle-menu").click(function() { 
    $("#effectMenu").animate({ 
     width: 'toggle' 
    }, 350); 
    $(".red").toggleClass('left'); 
    return false; 
    }); 
}); 
.red { 
    background-color: red; 
    height: 50px; 
    margin-top: 2px; 
    width: 100px; 
    position: relative; 
    transition: all 350ms ease-in-out; 
} 

#effectMenu { 
    display: none; 
    background: grey; 
    color: #FFF; 
    width: 30px; 
    position: absolute; 
    height: 100%; 
    z-index: 1; 
} 

.container { 
    border: 2px solid #73AD21; 
    width: 100px; 
} 
.left { 
    margin-left:30px; 
    transition: all 350ms ease-in-out; 
}

https://jsfiddle.net/ygmbnwgL/

来源

2016-06-01 09:33:58 madalinivascu

你可以使用#effectMenu https：// jsfiddle。净/ ygmbnwgL/3 / – madalinivascu

使用float和relative位置，而不是absolute一个，你可以做到这一点：

CSS代码：

#red { 
    background-color:red; 
    height:50px; 
    margin-top: 2px; 
    width: 100px; 
    position:relative; 
    float: left; 
} 

#effectMenu 
{ 
    display: none; 
    background: grey; 
    color: #FFF; 
    width:30px; 
    position:relative; 
    height:150px; 
    z-index:1; 
    float: left; 
} 

.container { 
    border: 2px solid #73AD21; 
    width:150px; 
}

See this fiddle

来源

2016-06-01 09:33:51

推其他divs到右边

回答

相关问题