Question

所以我所拥有的是3个div inline-block。当点击任何一个div内的图像时，另一个div淡出＆amp;带有“点击”图像的div向左滑动。我的中心div工作得很完美，但是当我点击最右边的图像（淡出中央div和左边的div）时，右边的div动画和＆amp;然后跳转（好像它在动画之前移动到页面的中心）我知道它为什么这样做。我只是坚持补救它！

HTML：

<div id = "cicontainer">
            <div id = "facebook">
                <table>
                    <tr>
                        <td>
                            <img id = "facebookimg" src = "facebook.png" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h3> Facebook </h3>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p> Lorem ipsum dolor sit amet, ei option sapientem his, vide mucius fuisset mea id. Te novum consulatu nam, vim cu postea delectus. Nam an zril aliquando signiferumque, ea sea volutpat definitiones. Vis ut dicat ludus.</p>
                        </td>
                    </tr>
                </table>
            </div>
            <div id = "mail">
                <table>
                    <tr>
                        <td>
                            <img id ="mailimg" src = "mail.png" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h3> Email </h3>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p> Lorem ipsum dolor sit amet, ei option sapientem his, vide mucius fuisset mea id. Te novum consulatu nam, vim cu postea delectus. Nam an zril aliquando signiferumque, ea sea volutpat definitiones. Vis ut dicat ludus.</p>
                        </td>
                    </tr>          
                </table>
            </div>
            <div id = "phone">
                <table>
                    <tr>
                        <td>
                            <img id = "phoneimg" src = "phone.png" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h3> Phone </h3>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p> Lorem ipsum dolor sit amet, ei option sapientem his, vide mucius fuisset mea id. Te novum consulatu nam, vim cu postea delectus. Nam an zril aliquando signiferumque, ea sea volutpat definitiones. Vis ut dicat ludus.</p>
                        </td>
                    </tr>
                </table>
            </div>

         </div>

CSS：

#cicontainer    {
height: 556px;
width: 100%;
text-align: center;
margin-top: 50px;

}

#facebook   {
height: auto;
margin: auto;
width: 202px;
text-align: center;
display: inline-block;
padding: 30px;
position: relative;
}

#mail   {
height: auto;
margin: auto;
width: 202px;
text-align: center;
display: inline-block;
padding: 30px;
position: relative;
}

#phone  {
height: auto;
margin: auto;
width: 202px;
text-align: center;
display: inline-block;
padding: 30px;
position: relative;
}

#cicontainer h3 {
margin-top: 50px;
font-family: BonvenoCF-Light;
}

#cicontainer p  {
font-family: BonvenoCF-Light;
font-size: 14px;
margin-top: 30px;
}

jQuery的：

$(document).ready(function(){
$('#facebookimg').click(function(){
    $('#mail').fadeOut(1500);
    $('#phone').fadeOut(1500);
    });

$('#mailimg').click(function(){
    $('#facebook').fadeOut(1500);
    $('#phone').fadeOut(1500);
    $('#mail').animate({
        left: '-=292' }, 1500, function(){
        });
    });

    $('#phoneimg').click(function(){
    $('#mail').fadeOut(1500);
    $('#facebook').fadeOut(1500);
     $('#phone').animate({
        left: '-=584' }, 1500, function(){

        });
    });
});

这就是代码目前的工作方式，我尝试了很多方法来解决它。但我确信有一个更简单（更清洁的方式）。提前致谢

Answer 1

fadeOut函数基本上将元素的不透明度设置为0，然后将其显示更改为“无”，从而影响元素的布局。我想这是让你最正确的元素跳跃。尝试使用

替换$('#phoneimg").click中的fadeOut（）

animate({opacity:0})

Answer 2

我已将您的代码更新为以下内容：

CSS

            #cicontainer    {
height: 556px;
width: 100%;
text-align: center;
margin-top: 50px;

}

.block{
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
position: absolute;
}

#facebook   {
height: auto;
margin: auto;
width: 202px;
text-align: center;
display: inline-block;
padding: 30px;
left:100;
}

#mail   {
height: auto;
margin: auto;
width: 202px;
text-align: center;
display: inline-block;
padding: 30px;
left: 332px;
}

#phone  {
height: auto;
margin: auto;
width: 202px;
text-align: center;
display: inline-block;
padding: 30px;
left: 564px;
}

#cicontainer h3 {
margin-top: 50px;
font-family: BonvenoCF-Light;
}

#cicontainer p  {
font-family: BonvenoCF-Light;
font-size: 14px;
margin-top: 30px;
}

HTML

<div id = "cicontainer">
            <div class="block" id = "facebook">
                <table>
                    <tr>
                        <td>
                            <img class="handle" id = "facebookimg" src = "facebook.png" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h3> Facebook </h3>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p> Lorem ipsum dolor sit amet, ei option sapientem his, vide mucius fuisset mea id. Te novum consulatu nam, vim cu postea delectus. Nam an zril aliquando signiferumque, ea sea volutpat definitiones. Vis ut dicat ludus.</p>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="block" id = "mail">
                <table>
                    <tr>
                        <td>
                            <img class="handle" id ="mailimg" src = "mail.png" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h3> Email </h3>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p> Lorem ipsum dolor sit amet, ei option sapientem his, vide mucius fuisset mea id. Te novum consulatu nam, vim cu postea delectus. Nam an zril aliquando signiferumque, ea sea volutpat definitiones. Vis ut dicat ludus.</p>
                        </td>
                    </tr>          
                </table>
            </div>
            <div class="block" id = "phone">
                <table>
                    <tr>
                        <td>
                            <img class="handle" id = "phoneimg" src = "phone.png" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h3> Phone </h3>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p> Lorem ipsum dolor sit amet, ei option sapientem his, vide mucius fuisset mea id. Te novum consulatu nam, vim cu postea delectus. Nam an zril aliquando signiferumque, ea sea volutpat definitiones. Vis ut dicat ludus.</p>
                        </td>
                    </tr>
                </table>
            </div>

         </div>

JS：

$(document).ready(function(){
    $('.handle').on('click', function(){
        $thisBlock = $(this).closest('.block');

        $('.block').css('opacity', 0);

        $thisBlock.css({
            'opacity': 1,
            'left': '100',
        });
    });
});

jQuery忽略.fadeOut上的元素内联块

2 个答案: