jquery not hiding classes and animating in on click

My goal is to create a page where every time I click a new line of text animates and fades in. To do that I first hide the elements "fadeDown1" through "fadeDown 4", then animate each "fadeDownN" element once per n each time when "downArrow" is clicked.

The problem is that in order to do that, I need to hide the elements in the first place before I can fade them in. The first problem is that they're not hiding. The second problem is that the animation doesn't seem to fire.

HTML:

<!DOCTYPE html>


<html>

<head>

<link rel="stylesheet" type="text/css" href="../css/main.css">


</head>

<body>

    <div id="container">

        <p class="fadeDown1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at interdum dui. Nullam blandit est libero. Maecenas a ex ante. Donec mollis eleifend nunc quis sagittis. 
        </p>

        <p class="fadeDown2">

            Nullam eu lacus sed neque feugiat vulputate. Sed finibus et nulla at mollis. Sed ultricies eu massa vitae suscipit. Fusce a semper est. Nunc sed egestas lectus.


            </p>
        <p class="fadeDown3">

            Nam scelerisque condimentum sapien, ut semper turpis pretium ac. Vivamus pulvinar finibus nulla, nec sollicitudin purus laoreet vel. In finibus, elit nec lacinia pulvinar, tortor est pretium justo, 

            </p>

        <p class="fadeDown4">
             Donec consequat massa vitae massa viverra, nec pellentesque lectus dictum. Curabitur vitae nisi in nunc vestibulum mattis. 

        </p>

        <p class="fadeDown5">
            Pellentesque egestas venenatis suscipit. Integer dui lacus, luctus sed sem nec, volutpat vulputate lacus. 
        </p>

        <div class="downArrow"> 
            <p>&darr;</p>
            </div>

    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../scripts/introclick.js"></script>

</body>


</html>

Script Code:

    $(document).ready(function(){

var i = 1; 
var j = 1;

//Hide the fadeDown elements on page load
    $(".downArrow").append("</p> Test </p>");


    function hideThemAll(){

        for (i=1; i < 6 ; i++){
        if (hiddenVars = 1){
            $("fadeDown"+i).hide();
        }
    }
}

hideThemAll();


//click arrow to simultaneously fade in and animate down one "fadeDown" class per click 
//(so no for loop)


    $(".downArrow").on("click",() => {

        $("fadeDown"+j).fadeIn({queue: false, duration:'slow'});
        $("fadeDown"+j).animate({top: "-10px"}, 'slow');
        j++;
    }); 
});

2 answers

  • answered 2018-01-13 17:54 user4723924

    Your problem is begging for a CSS animation solution...

    <!DOCTYPE html>
    <head>
    
    <style type="text/css">
    
    .fadeDown:hover {animation: AnimText 2s linear 0s infinite alternate none;}
    
    @keyframes AnimText {
       0% {opacity:1;}
      50% {opacity:0.5;}
     100% {opacity:0;}
    }
    
    </style>
    </head>
    
    <body>
    
    <p class="fadeDown">Some demo text...</p>
    
    <p class="fadeDown">Another line...</p>
    
    <p class="fadeDown">Yet another...</p>
    
    
    </body>
    </html>
    

  • answered 2018-01-13 19:43 camelCaseCowboy

    Oh Jeez-

    I wasn't using the . selector for class in my JavaScript to select the classes. Issue solved! Don't forget your syntax, everyone!

  • Grab an HTML tag has a certain CSS class using RegEx

    I need to grab all {ul} tags and their content that has a certain class or part of a certain class using Regular Expression.

    <!-- Example 1 -->
    <ul class="gallery-block justified-gallery">
        <li>
           <img src="" data-id="12" />
        </li>
    </ul>
    
    
    <!-- Example 2 -->
    <ul class="gallery-block-{style}">
        <li>
           <img src="" data-id="12" />
        </li>
    </ul>
    
    1. Grab all uls that have {gallery-block} class and their content from open to close tags

    2. Grab all uls that may have part {gallery-block} but not separated class unlike the first one

    3. Is that possible to return the {style} at the end of the class text?? after grabing that ul

    -- My Tests

    I successfully got data-ids but for all galleries exist, and I need IDs for each gallery separated

    I used preg_match_all

    preg_match_all( '#data-id=([\'"])(.+?)\1#is', $content, $regex_blocks );
    

    Now I want to replace $content to the output of a certain gallery instead.

  • Swift Circular Movement Animation of an image

    Creating an app where a an image moves upon the press of a button(repeated 3 times). The image currently has a linear movement but what I need is a circular movement animation for it.

    The image should start from the left of the screen, go towards top and then to the right of the screen so there are 3 points where the image stops. This has to be done with a circular animation.

    enum TimeOfDay: String {
        case Dimineata = "Dimineata"
        case Pranz = "Pranz"
        case Seara = "Seara"
    }
    
    class ViewController: UIViewController {
        @IBOutlet weak var timeOfDayLabel: UILabel!
        @IBOutlet weak var sunImage: UIImageView!
    
        var timeOfDay = TimeOfDay.Dimineata
    
        override func viewDidLoad() {
            super.viewDidLoad()
        }
    
        @IBAction func didTapNext(_ sender: Any) {
            switch timeOfDay {
            case .Dimineata:
                timeOfDay = .Pranz
                sunImage.image = UIImage(named: "LunchSun")
    
                UIView.animate(withDuration: 1) {
                    self.sunImage.frame = CGRect(x: self.view.center.x-50, y: 120, width: 100, height: 100)
                }
            case .Pranz:
                timeOfDay = .Seara
                sunImage.image = UIImage(named: "NightSun")
                UIView.animate(withDuration: 1) {
                    self.sunImage.frame = CGRect(x: self.view.frame.width-50, y: 166, width: 100, height: 100)
                }
            default:
                timeOfDay = .Dimineata
                sunImage.image = UIImage(named: "NightSun")
                UIView.animate(withDuration: 1) {
                    self.sunImage.frame = CGRect(x: self.view.frame.origin.x-50, y: 166, width: 100, height: 100)
                }
            }
            timeOfDayLabel.text = timeOfDay.rawValue.uppercased()
        }
    
    }
    
  • fragment transition animation: from an fragment that hides the action bar to a fragment that shows the action bar

    I have two fragments Fragment A and Fragment B. Fragment A has a button that replaces Fragment A with Fragment B. Similarly, Fragment B has a button that replaces itself with Fragment A. I'd like to add an animation of the button in Fragment A expanding to Fragment B, and then Fragment B shrinking back to Fragment A's button (when the button in `Fragment B is pressed).

    I managed to do that with shared elements. I added a transitionName to the button, and the same name to ConstraintLayout containing the button in Fragment B. It's smooth and nice!

    Now to the problem: I want Fragment B to hide the action bar and Fragment A to show the action bar and, of course, the animation to work smoothly. Fragment B in its onCreate method hides the action bar by calling getSupportActionBar().hide() and when transitioning from Fragment A to Fragment B everything looks good.

    Fragment A in its onCreate method shows the action bar. And when I'm transitioning from Fragment B to Fragment A I can see a that the Fragment B is not shrinking linearly into a button. It looks like when the action bar is drawn, the animation realizes that it will have to reposition the button and then you can see a jump in the animation.

    I tried different things: animating the action bar and removing the animation, showing and hiding it in the onCreate and in the activity's code that handles fragment replacements...

    What would be a proper way to handle this kind of transition with showing and hiding the action bar?

    Thanks, Marko

  • How to make UISlider Thumb Image rotating / animating in Swift?

    I want to use a 360° permanently rotating image as the thumb for my slider.

    var sliderimage = UIImage(named: "slider-t")
    

    How can I achieve that?

  • filter/hiding results using a calculated field

    I have a list of cities set to ROWS. In the columns I have a Dimension named “New Default” which has answers of “Yes” and “No”. In the two columns of Yes and No I have a COUNT of units (Loan Number). For example:

               Yes  No  Total
    
    Miami       4   54  48
    Cincinnati  1       1
    Washington      5   5
    

    What I’d like to do is create a filter, where it removes any city where it is EMPTY in the “Yes” column. But I would still like it to show what is in the “No” column, but only if there is something in the “Yes” column. If the “Yes” column is empty, then filter the city all together and show no results. I’ve created a calculated field:

    IF [New Default] <'2'
    THEN 'Filter'
    ELSE 'Show'
    END
    

    The problem with this is that it removes the “No” column all together.

  • Overriding "Important" to make a div hidden
    left: auto !important; 
    top: -55px !important; 
    right: 0px !important; 
    bottom: auto !important; 
    display: block !important; 
    visibility: visible !important; 
    position: absolute;
    

    This is the css styles of div that I need to have hidden. I have tried many different things. I cannot change the code, but I can add to it. Any help would be greatly appreciated.

  • Can we hide the section label in Mutiple Pie Chart in JFreeChart

    I am using Java Swing to make a multiple pie chart. But my chart is always appears with sections's label.

    I tried to use plot.setLabelGenerator(null); but it does not work.

    Anyone know the answer, please help me!