0
Я пытаюсь применить затухание и выключение при показе и скрытии div.Примените fadeIn над скрытым div нажимайте и покажите его содержимое
Когда я нажимаю кнопку, загорается таблица fadeOut (это делается), и скрытый div должен появляться в том же месте.
Я хотел скользить из-под стола, но это тоже не происходит!
$(selector).toggle('slide', {direction: 'left'}, 1400);
Ниже мой код
$(document).ready(function(){
$("[data-toggle='toggle']").click(function() {
var selector = $(this).data("target");
//$(selector).toggleClass('in');
\t $('#info').fadeOut('slow');
\t $(selector).fadeIn('slow');
});
});#demo {
: width 2s ease;
-moz-transition: width 2s ease;
-o-transition: width 2s ease;
transition: width 2s ease;
overflow: hidden;
vertical-align: middle;
line-height: 30px;
}
#demo.in {
width: 50%;
\t height: 50%;
}
#other {
: width 2s ease;
-moz-transition: width 2s ease;
-o-transition: width 2s ease;
transition: width 2s ease;
display: inline-block;
overflow: hidden;
background: yellow;
vertical-align: middle;
line-height: 30px;
}
#other.in {
width: 50%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
\t \t
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- begin snippet: js hide: false -->
<div class="container-fluid">
<div class="page-head"> Form Submit</div>
<div class="row">
<div class="col-xs-12">
\t <div class="col-xs-6" id="other">
\t \t <form class="form-horizontal" method="get">
\t \t <fieldset class="form-group">
\t \t \t <label for="exampleInputEmail1">Email address</label>
\t \t \t <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
\t \t \t <small class="text-muted">We'll never share your email with anyone else.</small>
\t \t </fieldset>
\t \t <fieldset class="form-group">
\t \t \t <label for="exampleInputPassword1">Password</label>
\t \t \t <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
\t \t </fieldset>
\t \t <fieldset class="form-group">
\t \t \t <label for="exampleSelect1">Example select</label>
\t \t \t <select class="form-control" id="exampleSelect1">
\t \t \t <option>1</option>
\t \t \t <option>2</option>
\t \t \t <option>3</option>
\t \t \t <option>4</option>
\t \t \t <option>5</option>
\t \t \t </select>
\t \t </fieldset>
\t \t </form>
\t \t <button type="button" class="btn btn-primary btn-sm" data-toggle="toggle" data-target="#demo"> Read agreement</button>
\t </div>
\t <div class="col-xs-6" id="info" >
\t <table class="table table-bordered">
\t <tr>
\t \t <td> Name: </td>
\t \t <td> Test </td>
\t </tr>
\t <tr>
\t \t <td> Name: </td>
\t \t <td> Test </td>
\t </tr>
\t <tr>
\t \t <td> Name: </td>
\t \t <td> Test </td>
\t </tr>
\t </table>
\t </div>
</div>
\t <div class="hide" id="demo">
\t <p>
\t \t "Lorem ipsum" text is derived from sections 1.10.32–3 of Cicero's De finibus bonorum et malorum (On the Ends of Goods and Evils, or alternatively [About] The Purposes of Good and Evil).[2] The original passage began: Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipisci velit (translation: "Neither is there anyone who loves, pursues or desires pain itself because it is pain").
\t </p>
\t </div>
</div>
</div>
Версия 'toggle' вы используете JQuery UI требует – adeneo
Я добавил 1.11.3/jquery-ui.min.js в свой файл, я добавил в js. Но все же это не работает для меня. – user269867
У вас есть HTML, который я принимаю? – zer00ne