jquery - jQuery html css 滑动切换效果

Question

我正在尝试制作一个电影预订系统网站，该网站也包含电影信息。我想实现一种机制，当用户单击特定电影的海报时，其信息（描述和演员表）会显示并向下滑动。我已经实现了这一点。但是我遇到的问题是，当对特定电影的描述向下滑动时，同一行中的所有其他电影海报都会随之向下滑动。我想要的是让所有其他元素保持静态。

这是我的 HTML 代码：

    <div class="contents">
    <table id="movies">
        <tr>
            <td class="Horror"><img id="Image1" src="<?php echo "$image_1"; ?>" width=250 height=400> <p><?php echo "Name: $name_1";?></p>
                                                                                                <p class="description" id="desc1"><?php echo "<span>Description:</span> $description_1"?>
                                                                                                <p class="cast" id="cast1"> <?php echo "<span>Cast:</span> $cast_1" ?></p></td>
            <td class="Action"><img id="Image2" src="<?php echo "$image_2"; ?>" width=250 height=400> <p><?php echo "Name: $name_2";?></p>
                                                                                            <p class="description" id="desc2"><?php echo "<span>Description:</span> $description_2"?>
                                                                                            <p class="cast" id="cast2"> <?php echo "<span>Cast:</span> $cast_2" ?></p></td>
            <td class="Action"><img id="Image3" src="<?php echo "$image_3"; ?>" width=250 height=400> <p><?php echo "$name_3";?></p>
                                                                                            <p class="description" id="desc3"><?php echo "<span>Description:</span> $description_3"?>
                                                                                            <p class="cast" id="cast3"> <?php echo "<span>Cast:</span>$cast_3" ?></p></td>
        </tr>
        <tr>
            <td class="Action"><img id="Image4" src="<?php echo "$image_4"; ?>" width=250 height=400> <p><?php echo "Name: $name_4";?></p>
                                                                                            <p class="description" id="desc4"><?php echo "<span>Description:</span> $description_4"?>
                                                                                            <p class="cast" id="cast4"> <?php echo "<span>Cast:</span> $cast_4" ?></p></td>
            <td class="Horror"><img id="Image5" src="<?php echo "$image_5"; ?>" width=250 height=400> <p><?php echo "Name: $name_5";?></p>
                                                                                            <p class="description" id="desc5"><?php echo "<span>Description:</span> $description_5"?>
                                                                                            <p class="cast" id="cast5"> <?php echo "<span>Cast:</span> $cast_5" ?></p></td>
            <td class="Comedy"><img id="Image6" src="<?php echo "$image_6"; ?>" width=250 height=400> <p><?php echo "Name: $name_6";?></p>
                                                                                            <p class="description" id="desc6"><?php echo "<span>Description:</span> $description_6"?>
                                                                                            <p class="cast" id="cast6"> <?php echo "<span>Cast:</span> $cast_6" ?></p></td>
        </tr>
    </table>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/show.js"></script>

这是我的 CSS：

    td .description{

display:none;
padding:40px;
/*background-image: url('Images/desc_back.jpg');*/
background-color: rgba(230, 230, 239, 0.3);
color:#222;
position:relative;
right:-120px;
top:-290px;
/*margin:0, auto;*/
border: 3px solid transparent;
border-radius: 10px;
overflow:hidden;
}

    td .cast {
display:none;
/*background-color: rgba(34, 34, 34, 0.4);
color:#f3f2f1;*/
background-color: rgba(230, 230, 239, 0.3);
color:#222;
position:relative;
right:-120px;
top:-290px;

border: 3px solid transparent;
border-radius: 10px;
}
    span{
font-size:16px;
font-weight: bold;
text-decoration: underline;
}

和我的 jQuery：

    $('document').ready(function(){
var count=1;

    $('#Image1').click(function(){
if(count === 1){
    $('#desc1').slideToggle('slow');
    $('#cast1').slideToggle('slow');
     count=0;
}
else{
    $('#cast1').slideToggle('fast');
    $('#desc1').slideToggle('fast');
     count=1;
}
});
    $('#Image2').click(function(){
if(count === 1){
    $('#desc2').slideToggle('slow');
    $('#cast2').slideToggle('slow');
     count=0;
}
else{
    $('#cast2').slideToggle('fast');
    $('#desc2').slideToggle('fast');
     count=1;
}
});
    $('#Image3').click(function(){
if(count === 1){
    $('#desc3').slideToggle('slow');
    $('#cast3').slideToggle('slow');
     count=0;
}
else{
    $('#cast3').slideToggle('fast');
    $('#desc3').slideToggle('fast');
     count=1;
}
 });
    $('#Image4').click(function(){
if(count === 1){
    $('#desc4').slideToggle('slow');
    $('#cast4').slideToggle('slow');
     count=0;
}
else{
    $('#cast4').slideToggle('fast');
    $('#desc4').slideToggle('fast');
     count=1;
}
});
    $('#Image5').click(function(){
if(count === 1){
    $('#desc5').slideToggle('slow');
    $('#cast5').slideToggle('slow');
     count=0;
}
else{
    $('#cast5').slideToggle('fast');
    $('#desc5').slideToggle('fast');
     count=1;
}
});
    $('#Image6').click(function(){
if(count === 1){
    $('#desc6').slideToggle('slow');
    $('#cast6').slideToggle('slow');
     count=0;
}
else{
    $('#cast6').slideToggle('fast');
    $('#desc6').slideToggle('fast');
     count=1;
}
});
});

我想要实现的只是希望我的描述和演员能够滑动并保持其他所有内容不变。非常感谢我得到的任何帮助。

score 3 · Accepted Answer

我会说忘记表、ID、计数器、if...else 语句。这个问题比你想象的要容易。关键是使用类和this.

查看演示。

首先创建适当的标记。如有必要，您可以使用另一个 div 更改段落，重点是不要为此使用表格，因为它们可能不是必需的，而且它无缘无故地使事情复杂化。

<div class="movie">
  <img src="http://placekitten.com/270/390"/>
  <p>
    <strong>Title</strong>
    <span>Lorem ipsum dolor sit amet...</span>
  </p>
</div>

然后用css定位所有东西。如果你使用border-box它会更容易调整，因为你不必担心宽度。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.movie { 
  width: 270px;
  height: 390px;
  position: relative;
  cursor: pointer;
}
.movie strong {
  display: block;
  font-size: 20px;
}
.movie p {
  position: absolute;
  bottom: 0;
  padding: 1em;
  margin: 0;
  width: 100%;
  background: rgba(255,255,0,.8);
  display: none;
}

最后，您只需要一行jQuery：

$('.movie').click(function() { $('p', this).slideToggle(); });

score 1 · Accepted Answer

你可以这样做：

$('[id^="Image"]').each(function() {
    $(this).click(function() {
        if(count === 1){
            $(this).siblings('.description').slideToggle('slow');
            $(this).siblings('.cast').slideToggle('slow');
            count=0;
        }
        else{
            $(this).siblings('.description').slideToggle('fast');
            $(this).siblings('.cast').slideToggle('fast');
            count=1;
        }
    });
})

jquery - jQuery html css 滑动切换效果

2 回答 2

Related

Reference