0

所以我拥有的是 3 个 div 内联块。当单击任何 div 内的图像时，其他 div 会淡出，其中带有“单击”图像的 div 会向左滑动。我的中心 div 工作得很好，但是当我点击最右边的图像（淡出中心 div 和左 div）时，右 div 动画然后跳转（好像它在动画之前移动到页面的中心) 我确切地知道它为什么这样做。我只是坚持补救它！

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(){

        });
    });
});

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

4

2 回答 2

0

我已将您的代码更新为如下所示：

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',
        });
    });
});
于 2013-04-30T11:39:40.870 回答
0

fadeOut 函数基本上将元素的不透明度设置为 0，然后将其显示更改为“无”，进而影响元素的布局。我想这会让你最右边的元素跳跃。尝试将 fadeOut() 替换$('#phoneimg").click为

animate({opacity:0})
于 2013-04-30T10:11:09.313 回答