更改特定元素,同时具有相同的类到多个元素

时间:2016-07-21 07:58:55

标签: javascript jquery margin

我有一个图片库。我想改变' margin-top'每个' .item'为50px高度小于140px的元素(用于响应设计目的)。这就是我到目前为止所拥有的。 我应该在大括号之间写什么才能使它工作? 请访问javascript代码。



var itemHeight = $(".flex-images").find(".item").height();
if(itemHeight<140){
$(this(".item")).style.marginTop = "50px";
}:
&#13;
.item {
  cursor: pointer;
  max-height: 150px;
min-height:120px;
  position: relative;
  overflow: hidden; 
top:0;
left:0;
}

.item img {
  position: absolute;
  right:0;
padding:0px;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

.item  {
  position: absolute;
    -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
}

.item:hover { opacity: 1; }

.item .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
text-align:center;
}


.item {
  opacity: 1;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
}

.item:hover, 
.item:focus {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.item .tagline {
transition-delay: 0.2s;
transition-duration: 0.2s;
opacity:0;
margin-top:100px;
}


.item:hover .tagline,
.item:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="flex-images">
    <div class="item " data-w="160" data-h="100"><a href="https://www.google.co.il/"><img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg"></a>
<div class="tagline overtext"><a href="http://diginfobettersystem.com/i/images/facebook-logo.png"> <img src="http://diginfobettersystem.com/i/images/facebook-logo.png"style="height:30px;width:30px;"></a>etet
</div>
</div>



</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案