Categories
Mastering Development

.find not work and only First child is work

I tried to make a slide show for our customer icons. So, I do it be animate
and it works, but I want it when it finishes starting again.

I try everything, nth-child – find ‘*’ – etc…
every time it works on the first element only

<section class="Our-Clients">
  <div class="Container">
    <h1 class="upper text-center">Our <span class="main-color">Clients</span></h1>
    <p class="text-center">Our parent's in success, don't think too much and join with them</p>
    <div id="clients-box">
      <ul>
        <li class="client"><img src="../Css/Images/ati.png" /></li>
        <li class="client"><img src="../Css/Images/al_hamra.png" style="margin-bottom:-8px;" /></li>
        <li class="client"><img src="../Css/Images/al_adeed.png" style="height: 85px; width: 60px;" /></li>
        <li class="client"><img src="../Css/Images/amer.png" /></li>
        <li class="client"><img src="../Css/Images/damac.png" style="margin-bottom:30px;" /></li>
        <li class="client"><img src="../Css/Images/dubai_ensurance.png" /></li>
        <li class="client"><img src="../Css/Images/dammas.png" style="margin-bottom:20px;" /></li>
        <li class="client"><img src="../Css/Images/ghoreer.png" /></li>
        <li class="client"><img src="../Css/Images/hadef.png" /></li>
        <li class="client"><img src="../Css/Images/tas_heel.png" /></li>
      </ul>
    </div>
  </div>
</section>

CSS:

/* Start Our-Clients */

#clients-box {
  border-bottom: 3px solid #c00;
  border-top: 3px solid #c00;
  overflow: hidden;
  height: 110px;
}

#clients-box ul {
  list-style: none;
  width: 300%;
}

#clients-box .client {
  margin-left: 175px;
  float: left;
  position: relative;
  right: 0px;
}

#clients-box img {
  width: 100px;
  opacity: 70%;
  filter: grayscale(100%);
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

#clients-box img:hover {
  filter: grayscale(0%);
  opacity: 100%;
  cursor: crosshair;
}

/* End Our-Clients */

jQuery:

var $clients = $('#clients-box');
var $ulclient = $clients.find('ul');
var $client = $ulclient.find('*');
setInterval(function() {
  $client.animate({
    'right': '+=300px'
  }, 1000, function() {
    if ($client.css('right') == '3000px') {
      $('li').css('right', 0);
    }
  })
}, 1000);

This is the last try I did, also when I put right:-800 in CSS the jQuery does not work.

Leave a Reply

Your email address will not be published. Required fields are marked *