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

What is the method for designing a relative layout that organizes elements horizontally?

Can you tell me why elements are typically arranged vertically in a column? Is it feasible to change their orientation and display them horizontally, like in a row instead of a column? ...

htmlcss

Is the iCheck feature designed to block all parent click events?

I've developed an "interaction tracker" system that collects anonymous data on clicked page elements. By implementing an event listener for clicks on the body, I can track interactions with any element on my site successfully. However, interestingly ...

javascriptjqueryicheck

Is there a way to extract information from the HTML source code of an external website and display it in my application?

Seeking a method to search an external URL for content that matches "title" and then display the results on my HTML page using Javascript. Despite my efforts with Javascript, I have not come across any resources that address this issue. Could it be that I ...

javascriptjqueryhtml

Encountering an issue that states that jQuery must be included before Bootstrap's JavaScript is causing an

I encountered the following exception: bootstrap.js:240 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. Make sure to include jQuery before Bootstrap's JavaScript at Object.jQueryDetection (bootstrap.js:240) at bootstrap.js:255 a ...

jqueryangulartwitter-bootstrap

Switch over to using a for loop

I have a query regarding implementing multiple toggles within a for loop. For instance, I want a toggle menu to appear when clicking on a div. Here is the code snippet: for (var i = 0; i < myObjectString.length; i++) { var obj = JSON.parse(myObjectStr ...

javascriptjqueryhtmlcssjson

Using Two JavaScript Functions with Identical Names in One HTML File

I am currently facing an issue with a function where the data is retrieved from the getValue() function. The following code snippet is a fragment. grid.js function gridLoadComplete(){ var data = getValue(); } Take into account the following H ...

javascriptjqueryhtml

Experiencing a 401 error when making an AJAX call to BigCommerce's API

I am attempting to reach the Minimum Purchase Quantity on quick search results by utilizing jQuery/AJAX to call an API. However, we are encountering a challenge as the API is not responding and instead displaying the following error message: NetworkErro ...

jqueryajaxapie-commercebigcommerce

What are the steps for creating a dropdown menu that allows for easy selection of the correct item

I am dealing with a dropdown menu as shown below. <select name="slt"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="3">Three +</option&g ...

javascriptjqueryhtmlasp.net

Update: Explored 0 web pages (at a rate of 0 pages per minute) and obtained information from 0 elements (at a rate of

I'm a beginner in Python and Scrapy, currently working on my first project to crawl web security information from a website. However, when I try to run it using cmd, I encounter the message "Crawled 0 pages (at 0 pages/min), scraped 0 items (at 0 item ...

pythoncssscrapyweb-crawler

Creating a visible block in ReactJS: Step-by-step guide

Hello and thank you for all the hard work you do on this platform. I am relatively new to working with ReactJS and have been encountering some difficulties trying to integrate it with sandbox environments like JSFiddle. I have a div element named "app-con ...

cssreactjsjsfiddle

The navigation bar vanishes from sight while scrolling underneath other sections

UPDATE: Problem solved! I discovered that the 'overflow:hidden' inside the #main for the media query was causing the navigation to disappear. I have a scroll navigation positioned at the top of my webpage. However, as I scroll down, the navigati ...

jqueryhtmlcsssass

Struggling with AJAX requests in a cordova/ratchet app for mobile devices

I encountered some challenges when trying to make an AJAX request in my cordova project. $.ajax({ url: "https://mydevserver/REST.php?method=mobileGetData", success: function(result){ alert("successful ajax"); }, error: function(xhr ...

javascriptphpjqueryajaxcordova

Selecting menu items in React Material UI with various background colors using the RAL color selector component

Seeking a solution to create a component for selecting RAL colors using Material UI's TextField and MenuItem. Each item in the menu should have a background color reflecting the RAL color it represents. However, Material UI no longer supports inline s ...

cssreactjsmaterial-ui

Next JS Event Listener Failing to Detect Scroll Events

Currently, I am attempting to change the state and display a shadow in the navigation bar when the user scrolls, but for some reason it is not detecting the event. I am working with nextJS 13 and tailwind css. const [shadow, setShadow] = useState(false) ...

javascriptcssnext.jstailwind-css

I am having trouble adding multiple items on different occasions - is it something to do with JQUERY

I have been working on a dynamic website that loads Firebase values into a table. However, I encountered an issue where the data does not appear when going back to the orders page after visiting another page. After some testing, I found that placing a but ...

javascriptjqueryhtmlajax

Encountered a Webpack issue when trying to load the primeng.min

I recently initiated a fresh project using yo aspnetcore-spa. My goal is to integrate the PrimeNG component library. Upon installing font-awesome and primeng: npm install font-awesome primeng --save I included CSS in the webpack vendor list: vendor: [ ...

cssangularwebpackprimeng

Change the default direction of content scrolling in CSS and JavaScript to scroll upwards instead of

I am currently working on a website where the navigation bar spans the entire width and remains fixed in place. Below the navigation bar is a cover image, followed by the main content section. As you scroll down, the navigation bar covers the image from t ...

javascripthtmlcss

Remove click event listeners from a specific element within a group of selected elements using D3

In my D3 class, I have a group of selectors that I want to remove the click event from: d3.selectAll('.selectors').on('click',function(){ //Remove the click event from the currently clicked element. }); I'm encountering tw ...

javascriptjqueryd3.js

Displaying all Sunday events in a jQuery FullCalendar

Is there a way to automatically add events for all the Sundays on my calendar using FullCalendar? day = 'Sunday'; <------ I want to specify this day to create an event var date = new Date(); var event = {id: result.id, title: from_time + &ap ...

javascriptjqueryfullcalendar

GWT integration for TinyMCE

I've been attempting to incorporate TinyMCE with GWT's RichTextBox, but so far I haven't had any luck. The issue seems to be that GWT turns the Rich text area into a #document, rather than a standard textarea in HTML. Does anyone know how to ...

javascriptjqueryhtmlgwttinymce