CODEWITHSUNDEEP
jqueryfadeto
AusS2000
AusS2000

Reputation: 13

Jquery FadeTo callback not working as expected

I have a bunch of menu items (literally a menu), some of which are Gluten Free, Vegetarian, Vegan.

Initially I'd like to show all but provide buttons so people can discern GF or Vege or Vegan. To do this I would like to fade the items that don't match the selected criteria to 50% opacity. Or more correctly, fade all to 50% opacity, then bring the selected criteria back to 100% opacity.

$("#gf").click(function() { 
    $('.all').fadeTo("fast",0.5, function() {
        $('.gf').fadeTo("fast",1);
    })

Works a treat! But then when you select Vegatarian it simply highlights (opacity 1) the vegetarian options. It doesn't fade all.

$(document).ready(function() {
  $("#all").click(function() {
    $('.all').fadeTo("fast", 1)
  });
  $("#none").click(function() {
    $('.all').fadeTo("fast", 0.5)
  });
  $("#gf").click(function() {
    $('.all').fadeTo("fast", 0.5, function() {
      $('.gf').fadeTo("fast", 1);
    })
  });
  $("#vege").click(function() {
    $('.all').fadeTo("fast", 0.5, function() {
      $('.vege').fadeTo("fast", 1)
    })
  });
  $("#vegan").click(function() {
    $('.all').fadeTo("fast", 0.5, function() {
      $('.vegan').fadeTo("fast", 1)
    })
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=all>All</div>
<div id=none>None</div>
<div id=gf>GF</div>
<div id=vege>Vegetarian</div>
<div id=vegan>Vegan</div>
<h1>Canapés - Cocktail party (1.5 piece per person)</H1>
<h2>Cold Canapés (1.5 pieces per serve)</H2>
<div class="all gf ">
  <p>Assorted Sushi Rolls, Wasabi mayo and Soy (GF)</p>
</div>
<div class="all vege ">
  <p>Carrot and Zucchini Fritters with Hummus (V)</p>
</div>
<div class="all vege ">
  <p>Mini Tart Cases with Smoked Salmon, Caper Salsa and/or Goat?s Cheese and Olive Tapenade (v)</p>
</div>
<div class="all gf ">
  <p>Smoked Salmon Crepes with Dill, Capers, Cream Cheese and Salmon Roe (GF)</p>
</div>
<div class="all ">
  <p>Sweet Corn Fritters with Avocado and Crispy Prosciutto</p>
</div>
<div class="all ">
  <p>Seared Tuna with Pickled Ginger, Wasabi and Sesame</p>
</div>
<div class="all ">
  <p>BBQ Duck Pancakes with Shallot, Cucumber and Hoi sin</p>
</div>
<div class="all gf ">
  <p>Oysters: natural or with toppings (crème fraiche and salmon roe, Tabasco etc.) (GF)</p>
</div>
<div class="all ">
  <p>Betel leaves with coconut, hot smoked trout, roe</p>
</div>
<div class="all ">
  <p>Chinese Spoons with Prawns, leaves, sesame dressing</p>
</div>
<div class="all vege ">
  <p>Assorted Bruschetta; wild mushroom /parmesan, tomato and buffalo mozzarella (V)</p>
</div>

Note: I've got the None and All functions to prove that when simulated as separate steps the procedure works as expected. Just doesn't work as a callback.

Upvotes: 1

Views: 41

Answers (1)

vsmash
vsmash

Reputation: 306

Code says $('.all').fadeTo but your div classes have capital A <div class="All">

Upvotes: 0

Related Questions