。滑动切换行为不同的图像

这里是我的代码：

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
     <script type="text/Javascript" src="jquery.js"></script> 
     <script src="my.js"></script> 
     <title>My Jquery</title> 
    </head> 
    <body> 

    <div class="parent"><img src="images.jpg" class="pic"/></div> 
    </body> 
</html>

stylesheet.css中

.pic 
{ 
    border: 1px solid red; 
    visibility: hide; 
} 
.parent 
{ 
    background-color: yellow; 
}

my.js

$(document).ready(
        function(){ 
         $(".pic").click(
           function(){ 
               $(this).slideToggle(5000); 
              } 
             ); 
        });

问题是slideToggle通过水平/垂直滑动隐藏元素，除了我添加的图像。对于图像，它滑过对角线。为什么行为与图像不同？

来源

2015-08-22 InQusitive

尝试click处理

$(document).ready(
 
    function() { 
 
    $(".pic").click(
 
     function() { 
 
     $(this).parent().slideToggle(5000); 
 
     } 
 
    ); 
 
    });

.pic { 
 
    border: 1px solid red; 
 
    visibility: hide; 
 
} 
 
.parent { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div class="parent"> 
 
    <img src="http://lorempixel.com/100/100/nature" class="pic" /> 
 
</div>

来源

2015-08-22 06:09:41 guest271314

目前我正在做父母。但为什么它不能在形象上起作用，这是我的疑问。 – InQusitive

@InQusitive'.slideToggle（）'确实影响图像。尝试在动画期间在'console'的元素处查看'.pic'。将'.slideToggle（）'应用于父元素是否会返回预期结果？ – guest271314

是适用于父元素工作正常。 – InQusitive

中呼吁$(this).parent().slideToggle()我终于解决了问题。这是通过设置图像的宽度

.pic 
{ 
    border: 1px solid red; 
    display: block; 
    width: 300px; //added this line 

}

现在它工作正常。

来源

2015-08-22 07:56:44 InQusitive

。滑动切换行为不同的图像

回答

相关问题