CODEWITHSUNDEEP
javascriptjqueryhtmlcssparameter-passing
Pettyy
Pettyy

Reputation: 3

jQuery fade in and out function with parameters

Im trying to make this jQuery function to allow parameters or some way of making it able to work with every element in my list.

I have a function that does what i want for the first element in the list, but doesn't work for the others. I want to know if there is a way i can pass parameters into the jQuery function so i can make the function so i can make it work with several elements.

$(document).ready(function() {
  $("#f2").click(function() {
    $("#f2").fadeOut()
    $("#f1").delay(375).fadeIn()
  });
  $("#f1").click(function() {
    $("#f1").fadeOut();
    $("#f2").delay(375).fadeIn();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Kentucky Dam Flood Gates Open</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div id="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc" id="f1">
        Lorem Ipsum...
      </div>
    </div>
  </li>

  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Another Item</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div id="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc" id="f1">
        Lorem Ipsum...

      </div>
    </div>
  </li>

  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Another Item</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div id="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc" id="f1">
        Lorem Ipsum...

      </div>
    </div>
  </li>


</ul>

I expected this to work with everything that had the classes required on it and only change the ones you clicked on but that function only works for the first object in the list.

Upvotes: 0

Views: 179

Answers (3)

disinfor
disinfor

Reputation: 11533

Here's your updated code switching to classes.

You don't need to pass the selector if you are always targeting the same selectors.

You also needed to add some prev and next logic to the function, otherwise any f2 or f1 element that is clicked would trigger all of them on the page.

$(document).ready(function() {
  $(".f2").click(function() {
    $(this).fadeOut();
    $(this).next('.f1').delay(375).fadeIn();
  });
  $(".f1").click(function() {
    $(this).fadeOut();
    $(this).prev('.f2').delay(375).fadeIn();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Kentucky Dam Flood Gates Open</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div class="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc f1">
        Lorem Ipsum...
      </div>
    </div>
  </li>

  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Another Item</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div class="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc f1">
        Lorem Ipsum...

      </div>
    </div>
  </li>

  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Another Item</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div class="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc f1">
        Lorem Ipsum...

      </div>
    </div>
  </li>


</ul>

And here's the fiddle to play with: https://jsfiddle.net/brzeLywg/

Information on previous and next:

https://api.jquery.com/next/

https://api.jquery.com/prev/

Upvotes: 1

Robin
Robin

Reputation: 5427

Try this it works fine, JSFiddle Demo

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Kentucky Dam Flood Gates Open</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div class="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc f1">
        Lorem Ipsum...
      </div>
    </div>
  </li>

  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Another Item</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div class="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc f1">
        Lorem Ipsum...

      </div>
    </div>
  </li>

  <li>
    <div class="direction-r">
      <div class="flag-wrapper">
        <span class="flag">Another Item</span>
        <span class="time-wrapper">
                    <span class="time">Present Day</span>
        </span>
      </div>
      <div class="f2">
        <img src="images/Top-KY-Dam.jpg" />
      </div>
      <div class="desc f1">
        Lorem Ipsum...

      </div>
    </div>
  </li>


</ul>

JQuery:

$(document).ready(function() {
    $(".f2").on('click', function() {
    $(".f2").fadeOut();
    $(".f1").delay(375).fadeIn();
  });
  $(".f1").on('click', function() {
    $(".f1").fadeOut();
    $(".f2").delay(375).fadeIn();
  })
})

Upvotes: 0

Murtaza Hussain
Murtaza Hussain

Reputation: 4315

Create a function and wrap your code to pass the selector and delay as params.

function setAnimation(firstSelector, secondSelector, delayNum) {
  $(secondSelector).click(function() {
    $(secondSelector).fadeOut()
    $(firstSelector).delay(delayNum).fadeIn()
  });
  $(firstSelector).click(function() {
    $(firstSelector).fadeOut();
    $(secondSelector).delay(delayNum).fadeIn();
  });
}

on your script just call the as many functions as follows:

$(document).ready(function() {
  setAnimation("#f1", "#f2", 375);
});

Upvotes: 0

Related Questions