Question

How to use one jQuery function with many div's which shares one class. The function applied only for the first div. I have many img inside div's

<div class="carousel-caption">
    <div class="text" style="display: none;">
        <h2>Welcome to Winks</h2>
        <p>Watch the largest collection of Movies and TV series 
            anytime anywhere!
        </p>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("div.text").fadeIn(3000);
    });
</script>

Answer 1

I believe your problem is the inline style style="display: none;" on your <div>. Inline styles override almost anything in css (I believe anything that doesn't have !important), so they should be used very sparingly. It's very possible that this is overriding the .fadeIn(), which is probably using css in the background. If you moved the initial display: none to a css file, it could fix your issue.

Answer 2

Did you try with a space in between div and .text?

$(document).ready(function(){
  $("div .text").fadeIn(3000);
})

Demo https://jsfiddle.net/824L4e2k/1/

One function over div with same classes

2 个答案: