25.01.2016, 14:02
|
|
Профессор
|
|
Регистрация: 04.02.2012
Сообщений: 196
|
|
a = +b.toggle(1000).is(":hidden");
"a" всегда у тебя возвращает 0,
поставь alert(a):
(пожамкай, убедись сам. А вот как решить - это к рони)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
var news = 2; // - количество отображаемых новостей
hidenews = "- скрыть\u00A0старые\u00A0новости";
shownews = "+ показать\u00A0все\u00A0новости";
news++;
$("tr").each(function(c) {
var b = $(".news:nth-child(n+"+news+")", this).hide();
$(".archive", this).click(function(a) {
a.preventDefault();
a = +b.toggle(1000).is(":hidden");
alert(a);
$(this).text([hidenews, shownews][a])
}).text(shownews)
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="stroka">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka1">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka2">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
<a class="archive" href="#"><nobr></nobr></a>
</td>
</tr>
<tr>
<td class="stroka">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka1">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka2">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
</td>
</tr>
<tr>
<td class="stroka">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka1">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka2">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
</td>
</tr>
</table>
</body>
</html>
|
|
25.01.2016, 14:04
|
|
Профессор
|
|
Регистрация: 04.02.2012
Сообщений: 196
|
|
|
Я бы предложил делать не hide, а через дополнительный класс скрывать, навесив на него нужные стили, и добавивь как раз css анимацию на появление и исчезновение.
|
|
25.01.2016, 14:16
|
|
Профессор
|
|
Регистрация: 04.02.2012
Сообщений: 196
|
|
Хотя фигню ляпнул, держи раб. вариант. правда думаею его можно сделать и оптимальнее.
<script>
$(function(){
var news = 2; // - количество отображаемых новостей
hidenews = "- скрыть\u00A0старые\u00A0новости";
shownews = "+ показать\u00A0все\u00A0новости";
news++;
$("tr").each(function(c) {
var b = $(".news:nth-child(n+"+news+")", this).hide();
$(".archive", this).click(function(a) {
a.preventDefault();
b.toggle(1000);
$(this).text($(this).text()==hidenews?shownews:hidenews)
}).text(shownews)
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
var news = 2; // - количество отображаемых новостей
hidenews = "- скрыть\u00A0старые\u00A0новости";
shownews = "+ показать\u00A0все\u00A0новости";
news++;
$("tr").each(function(c) {
var b = $(".news:nth-child(n+"+news+")", this).hide();
$(".archive", this).click(function(a) {
a.preventDefault();
b.toggle(1000);
$(this).text($(this).text()==hidenews?shownews:hidenews)
}).text(shownews)
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="stroka">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka1">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka2">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
<a class="archive" href="#"><nobr></nobr></a>
</td>
</tr>
<tr>
<td class="stroka">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka1">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka2">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
</td>
</tr>
<tr>
<td class="stroka">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka1">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka2">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
</td>
</tr>
</table>
</body>
</html>
Последний раз редактировалось Siend, 25.01.2016 в 14:19.
|
|
25.01.2016, 14:17
|
 |
Интересующийся
|
|
Регистрация: 22.01.2016
Сообщений: 18
|
|
|
Сообщение от Siend
|
a = +b.toggle(1000).is(":hidden");
"a" всегда у тебя возвращает 0,
поставь alert(a):
(пожамкай, убедись сам. А вот как решить - это к рони)
|
Да, действительно. Хм, а что принципиально поменялось при добавлении параметра?.. |
|
25.01.2016, 14:18
|
|
Интересующийся
|
|
Регистрация: 22.01.2016
Сообщений: 18
|
|
Сообщение от Siend
|
Хотя фигню ляпнул, держи раб. вариант. правда думаею его можно сделать и оптимальнее.
<script>
$(function(){
var news = 2; // - количество отображаемых новостей
hidenews = "- скрыть\u00A0старые\u00A0новости";
shownews = "+ показать\u00A0все\u00A0новости";
news++;
$("tr").each(function(c) {
var b = $(".news:nth-child(n+"+news+")", this).hide();
$(".archive", this).click(function(a) {
a.preventDefault();
b.toggle(1000);
$(this).text($(this).text()==hidenews?shownews:hidenews)
}).text(shownews)
});
});
</script>
|
Спасибо, робит))) |
|
25.01.2016, 16:15
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
var news = 2; // - количество отображаемых новостей
hidenews = "- скрыть\u00A0старые\u00A0новости";
shownews = "+ показать\u00A0все\u00A0новости";
news++;
$("tr").each(function(c) {
var b = $(".news:nth-child(n+"+news+")", this).hide();
$(".archive", this).click(function(a) {
a.preventDefault();
a = +b.is(":hidden");
b.toggle(1000);
$(this).text([shownews,hidenews][a])
}).text(shownews)
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="stroka">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka1">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka2">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
<a class="archive" href="#"><nobr></nobr></a>
</td>
</tr>
<tr>
<td class="stroka">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka1">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka2">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
</td>
</tr>
<tr>
<td class="stroka">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka1">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
</td>
<td class="stroka2">
<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
</td>
</tr>
</table>
</body>
</html>
|
|
28.01.2016, 19:32
|
|
Интересующийся
|
|
Регистрация: 22.01.2016
Сообщений: 18
|
|
Подскажите, пожалуйста, почему при сворачивании блока происходит непонятное изменение ширины ячейки и дерганье в сторону? Будто в ячейке появляется и исчезает еще один блок. Конфликт стилей?
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="all" href="http://justcpa.biz/landingnew/style.css">
<link href="http://justcpa.biz/app/assets/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
</style>
</head>
<body>
<script>
$(function(){
var news = 1; // - количество отображаемых новостей
hidenews = "- скрыть старые новости";
shownews = "+ показать все новости";
$(".stroka").each(function() {
var b = $(".news", this).slice(news).hide();
$(".archive", this).click(function(a) {
a.preventDefault();
b.toggle(1000);
$(this).text($(this).text()==hidenews?shownews:hidenews)
}).text(shownews)
});
});
</script>
<div class="tab_content">
<div class="tabs_item">
<table class="rwd-table">
<tr class="info">
<th class="first">Оффер</th>
<th>EPС</th>
<th>CR</th>
<th>Условия</th>
<th id="vyplata" class="last">Выплата</th>
</tr>
<tr style="font-size: 15.5px;">
<td data-th="Name" style=""><img width="40" src="http://justcpa.biz/offers/1452133904_245.png" alt="{{ offer.title }}">Название оффера</td>
<td data-th="ECP">0</td>
<td data-th="CR">0</td>
<td data-th="Условия"><nobr>Подтвержденная заявка</nobr></td>
<!-- *** -->
<td class="stroka" data-th="Выплата">
<div class="news">
<div class="summa">
<nobr>450-500 руб.</nobr>
</div>
<div class="flagi"><nobr>
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
</nobr></div>
<div class="moregeo">
<a class="archive" href="#"></a>
</div>
</div>
<div class="news">
<div class="summa">
<nobr>450-500 руб.</nobr>
</div>
<div class="flagi"><nobr>
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
</nobr></div>
</div>
</td>
<!-- *** -->
</table>
</div>
</div>
</body>
</html>
|
|
28.01.2016, 19:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
Socpost,
замените toggle на slideToggle
|
|
28.01.2016, 19:52
|
|
Интересующийся
|
|
Регистрация: 22.01.2016
Сообщений: 18
|
|
|
Сообщение от рони
|
|
замените toggle на slideToggle
|
Спасибо Вам большое! |
|
01.02.2016, 14:39
|
|
Интересующийся
|
|
Регистрация: 22.01.2016
Сообщений: 18
|
|
Прошу помочь разобраться еще в одном вопросе: При нажатии кнопки, сначала резко увеличивается высота блока, а потом уже проходит плавная анимация. Т. е. получается как-то не логично: ссылка просто падает вниз, освобождая место выезжающему контенту, вместо того, чтобы плавно опускаться вместе с ним((
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="all" href="http://justcpa.biz/landingnew/style.css">
<link href="http://justcpa.biz/app/assets/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.flagi{
width: 220px;
text-align: center;
}
.summa{
text-align: center;
}
.moregeo{
font-size: 13px;
line-height: 15px;
}
.data{
vertical-align: middle;
}
.archive{
text-decoration: none;
color: #718faa;
}
.imgview{
width:60px;
vertical-align: middle;
}
.news{
display: inline-block;
}
</style>
</head>
<body>
<script>
$(function(){
var news = 6; // - количество отображаемых новостей
hidenews = "- скрыть\u00A0все\u00A0гео";
shownews = "+ показать\u00A0все\u00A0гео";
news++;
$("tr").each(function(c) {
var b = $(".news:nth-child(n+"+news+")", this).hide();
$(".archive", this).click(function(a) {
a.preventDefault();
a = +b.is(":hidden");
b.slideToggle(1000);
$(this).text([shownews,hidenews][a])
}).text(shownews)
});
});
</script>
<div class="tab_content">
<div class="tabs_item">
<table class="rwd-table">
<tr class="info">
<th class="first">Оффер</th>
<th>EPС</th>
<th>CR</th>
<th>Условия</th>
<th id="vyplata" class="last">Выплата</th>
</tr>
<!-- Строка данных -->
<tr style="font-size: 15.5px;">
<td data-th="Name" class="data"><img class="imgview" src="http://justcpa.biz/offers/1452133904_245.png" alt="{{ offer.title }}">Мужские духи с феромонами Sexy Life</td>
<td data-th="ECP" class="data">0</td>
<td data-th="CR" class="data">0</td>
<td data-th="Условия" class="data"><nobr>Подтвержденная заявка</nobr></td>
<td class="stroka" data-th="Выплата">
<div class="flagi">
<div class="summa">
<nobr>450-500 руб.</nobr>
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/b/Belarus.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/u/Ukraine.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/r/Russian_Federation.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/k/Kazakhstan.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/m/Moldova.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/r/Romania.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/l/Lithuania.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/l/Latvia.png" />
</div>
</div>
<div class="moregeo">
<a class="archive" href="#"></a>
</div>
</td>
</tr>
<!-- *** -->
</table>
</div>
</div>
</body>
</html>
|
|
|
|
