Inline slide effect using JQuery UI

Question

I am trying to hide an alert which is displayed inline using the slide function. It is displayed inline but the sliding doesn't happen inline like I intend it to happen. How can I make the sliding happen inline?

The following is the snippet with current code

$("#testDiv2").show();

$("#testDiv2").on('click', function () {
$("#testDiv2").hide('slide',{direction: 'left'}, 6000);
});

$(function() {
    if ($("#testDiv2").is(':visible')) 
     $("#testDiv2").css('display','inline-block'); 
});

#test,#testDiv,#testDiv2 { 
    display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="test">
A
<div id="testDiv2">
    <div id="testDiv" class="alert alert-success">Click to close</div>
</div>
B
</div>

Related posts:

I have seen this post which suggests to change to inline-block which doesn't solve the issue.
This self answered question is similar to mine but it is about displaying the next one inline not about the current one.

Ramiz Wachtler · Accepted Answer · 2015-05-15 19:38:04Z

1

Well, I figured out that this piece of code will fix the inline problem for you, but there are still some layout issues. I'm working on it.

#test > div.ui-effects-wrapper {
   display: inline-block !important;
}

SNIPPET

$("#testDiv2").show();

$("#testDiv2").on('click', function() {
  $("#testDiv2").hide('slide', {
    direction: 'left'
  }, 6000);
});

$(function() {
  if ($("#testDiv2").is(':visible'))
    $("#testDiv2").css('display', 'inline-block');
});

#test,
#testDiv,
#testDiv2 {
  display: inline-block;
}
#test > div.ui-effects-wrapper {
  display: inline-block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="test">
  A
  <div id="testDiv2">
    <div id="testDiv" class="alert alert-success">Click to close</div>
  </div>
  B
</div>

answered May 15, 2015 at 19:38

Ramiz Wachtler

5,6932 gold badges30 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ram Over a year ago

Thanks for the answer. Can you please what ui-effects-wrapper is?

Ram Over a year ago

Making ui-effects-wrapper inline instead of inline-block makes it better but the sliding effect goes over A which is not I want it to do.

Ramiz Wachtler Over a year ago

I'm not that familiar with jquery-ui but it seems like the ui-effects-wrapper (a wrapper for the sliding element) is being created during the animation process.

Ramiz Wachtler Over a year ago

that wrapper is a real pain in the a.. :|

Ram Over a year ago

True. I have been trying too.

Collectives™ on Stack Overflow

Inline slide effect using JQuery UI

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related