Unable to execute a basic opacity transition on a div element

Why isn't the opacity transitioning in Chrome? I only want it to fade in with the 'transitions' class without fading out first.

Check out this code sample: http://jsfiddle.net/chovy/t37k3/9/

<div></div>

<a href="#" class="start">start</a>


div { 
    width: 100px;
    height: 100px;
    background: #f00;
}

div.transitions {
    -moz-transition: opacity 1s, -moz-transform 1s;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    -o-transition: opacity 1s, -o-transform 1s;
    transition: opacity 1s, transform 1s; 
}

$(".start").click(function(e){
    e.preventDefault();
    $("div").css('opacity', 0).addClass('transitions').css('opacity', 1);
});

Note: Don't forget the class on the anchor and consider using inline opacity for practical use.

Here's a solution I found helpful:

jquerycsscss-transitions

Answer №1

Your selector in the snippet is not finding any matching elements

<div class="header">Header</div>

Using $(".header") will target any element with a class of "header"

http://codepen.io/example/1/

Update:

http://codepen.io/example/43/

To disable transitions in CSS, include the following:

.noanimate {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

Javascript code:

$(".show").click(function(e){
    e.preventDefault();
    $("section").css('opacity', 0)
    .addClass("noanimate")
    .addClass("transitions");

    setTimeout(function () {
        $("section").removeClass("noanimate")
       .css('opacity', 1);
    }, 0);
});

Answer №2

VIEW LIVE DEMONSTRATION

Sample HTML:

<div></div>
<a href="#" class="start">commence</a> <!-- INSERT A STYLE CLASS -->

CSS Style:

div { 
    opacity: 0.1;
    width: 100px;
    height: 100px;
    background: #f00;
}

.transitions {
    -moz-transition: opacity 1s;     /* NO TRANSFORMATION NECESSARY */
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s; 
    opacity:1;
}

JavaScript Functionality:

$(".start").click(function(e){
    e.preventDefault();
    $("div").addClass('transitions');
});

Answer №3

In addition to the information provided by PSL...

When adding a class for transition effects, make sure to include the desired CSS rules within the class itself that you are adding to the element.

For example, your .transitions class should be structured like this:

div.transitions {
    opacity: 1;
    -moz-transition: opacity 1s, -moz-transform 1s;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    -o-transition: opacity 1s, -o-transform 1s;
    transition: opacity 1s, transform 1s; 
}

Then, in your click event, only include:

$(".start").addClass('transition')

Answer №4

Visit this webpage for more details

<div></div>

<a href="#" class="start">start</a>

$(".start").click(function(e){
    e.preventDefault();

    var transitions = true
        , $div = $("div"); 

    $div.removeClass('transitions');

    if ( transitions ) {
        $div.addClass('activate');
        setTimeout(function(){
            $div.addClass('transitions').removeClass('activate');
        }, 20);
    }
});

div { 
    width: 100px;
    height: 100px;
    background: #f00;
}

div.activate {
    opacity: 0.1;
}

div.transitions {
    -moz-transition: opacity 2s;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    transition: opacity 2s; 
    opacity: 1;
}

After experimenting, I decided to apply a .activate class to establish the initial state when using transitions. Then, after a short delay, I add the .transitions class for the desired effect.

I then reset it with each click for demonstration purposes (though not strictly necessary).

Feedback is appreciated! My goal was to avoid inline CSS in JavaScript as much as possible.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue of CSS transitions flickering in Internet Explorer

Can someone help me troubleshoot an issue with this code in Internet Explorer? CSS: .nav-fillpath a { width: 100px; height: 100px; position: absolute; display: block; bottom: 0%; left:0; right:0; color: #3e3e3e; margin ...

htmlcssinternet-explorercss-transitions

Loading an animated SVG sprite file in real-time

Recently, I received an SVG sprite file from our designers to use in my app. The specified convention is to load the sprite at the top of the <body> element and then render icons using a specific code snippet: <svg class="u-icon-gear-dims"> ...

javascripthtmlcsssvg

Unlocking the Interactive Potential of CSS Across All Screen Formats

I am currently working on transforming my website into an engaging and interactive platform. My first challenge: The alignment of the logo image does not meet my desired specifications. Whenever the screen width exceeds 1200 pixels, there seems to be exc ...

phphtmlcssinteractive

Troubles encountered when cascading val(), text(), and data()

Here is my JavaScript/jQuery code: $select.append($("<option />") .val(this.id) .text(this.text) .data('name', this.name) .data('isstorage', this.isstorage)); Although it successfully assigns values to t ...

javascriptjquery

Which specific HTML element triggers the initiation of ajax in Jquery?

I have a situation where various HTML elements trigger ajax requests when clicked. My goal is to determine which specific element was clicked inside the ajaxComplete event. Although I attempted to use event.target, it only returns the entire document inst ...

javascriptjqueryhtmlajax

Mastering jQuery Ajax: Techniques for Handling Asynchronous Requests with Grace

In my PHP code, I have implemented a jQuery AJAX request that fetches data from the database and exports it into an Excel file. Once the AJAX request is successful, a download box for the Excel file pops up. This functionality works well across all browser ...

phpjqueryajax

State change shows the previous and current values simultaneously

I've been working on updating the values of initUsers on the DOM. The initial state values work fine, but when I try to update initUsers, it displays different values than expected. Essentially, entriesNum receives a number as an event and changes th ...

javascripthtmlcssreactjsjsx

Is there a way to partially conceal the H2 text using CSS?

Is there a way to partially hide H2 text using CSS? I have the following code: HTML: <div class="twocol-box1 superflex-content-6-12"> <h2 data-content="My - Text&amp;nbsp;<span style=&quot;float:right;&quot;>M ...

htmlcss

How can we use jQuery to animate scrolling down to a specific <div> when clicking on a link in one HTML page and then navigating to another HTML page?

I'm currently working on creating a website for my friend who is a massage therapist. Utilizing a bootstrap dropdown menu, I have added links to different treatments that direct to the treatment.html from the index.html page. Is there a way to creat ...

javascriptjqueryhtmlcss

I desire a smooth fade-in transition for the background image when the addClass function is

If the background color is set to header-fixed-position, the color will fade in. However, if the background is an image, the image will not fade in. Apologies for my lack of proficiency in English. Please refer to the sample code below. Try removing the c ...

javascripthtmlcssbackground-image

creating dynamic column headers with JavaScript

I am looking for a way to make the column names dynamic so that I don't have to manually update them every time. Here is my code snippet: jqGrid11.prototype = { display : function() { $('body').append(this.html.join("")); $("#jqGrid").j ...

javascriptjqueryjqgrid

The modal window pops up immediately upon the first click

Experience a dynamic modal element that springs to life with just the click of a button or an image. The magic lies in the combination of HTML, CSS, and jQuery code: <div id="modal-1" class="modal"> <div class="button modal-button" data-butto ...

javascriptjqueryhtmlcss

My AJAX request seems to be redirecting to my PHP file instead of simply returning the response text. What could be causing this issue?

I am currently working on a project for my Web Engineering course and I am incorporating jQuery to execute an AJAX request to my PHP file using the POST method. The task specifies that "each time the [submit] button is pressed, the form data should be disp ...

javascripthtmljqueryajaxweb

What is the best way to show a label and select box side by side using Angular Material?

I have been trying to keep input and label in the same line using Angular Material, but I haven't found a solution yet. Most of the available solutions are in HTML and CSS, but I specifically need a way using Angular Material. The method I tried invo ...

cssangularangular-materialangular-reactive-formsangular-flex-layout

Learn the steps for inserting or updating data in a local JSON file solely through JavaScript

Currently, I am in the process of reading a JSON file and removing an element once it finds an exact match. My goal is to then push the remaining data back into the JSON file after deletion. readJsonFile("./objects.json", function(jsonData){ let parsedD ...

javascriptjqueryjson

A problem arises when making an ajax call

I'm struggling with an Ajax call made using the jQuery .blur() method. Every time I try to execute it, an error message pops up. Any idea why this is happening? Here's my jQuery/Ajax Code: <script> $("#given_name").blur(function(){ va ...

jqueryajax

jQuery validation for custom start and end dates

I am seeking to implement custom validation for two date inputs using @Html.EditorFor in a specific view. The goal is to ensure that the start date is before or equal to the end date. Below is the code I have tried: <div class="form-group"> @Htm ...

jqueryasp.net

Changing the position of a Bootstrap popover dynamically from top to bottom

Struggling with the bootstrap popover here. I can't seem to change the popover position from top to bottom when it reaches the top of the viewport. I attempted to use placement: 'auto bottom' but unfortunately, it didn't do the trick f ...

javascriptjqueryhtmlcssbootstrap-popover

Looking for assistance with arranging and managing several containers, buttons, and modals?

My goal is to create a grid of photos that, when hovered over, display a button that can be clicked to open a modal. I initially got one photo to work with this functionality, but as I added more photos and buttons, I encountered an issue where the first b ...

javascripthtmlcssbuttonmodal-dialog

AJAX in jQuery cannot be used to send data to a PHP

I am facing an issue with my script that uses AJAX to post data to the server and display it, but unfortunately, it is not functioning properly... Here is the current output: Your viewport width is 1332x670 Ajax initialization failed! In this scenario, ...

phpjqueryajaxpost