Увеличение видимого текста с на-Нажмите кнопку "Подробнее"


Что я могу сделать лучше?

$(function () {
    "use strict";

    /*
     *  Header text. Vergroot de tekst door op lees meer te klikken
     */
    var heading = $(".header .text h2").height(),
        firstP = $(".header p:first").height(),
        areaSmall = heading + firstP,
        areaBig = $(".header .text").height(),
        box = $(".header .text"),
        readmore = $('.header .text a[title*="meer"]'),
        closeBox = $('.header .text a[title*="Sluit"]');

    $(".header .text").css({ height: areaSmall });

    readmore.click(function () {
        $(".header .text").animate({ height: areaBig }, 1000, "easeInQuart", function () {
            $(".header .text p").css({ visibility: "visible" });
        });
    });

    closeBox.click(function () {
        $(".header .text").animate({ height: areaSmall }, 1000, "easeOutQuart", function () {
            $(".header .text p").css({ visibility: "hidden" });
            $(".header .text p:first").css({ visibility: "visible" });
        });
    });

});


216
3
задан 4 ноября 2011 в 12:11 Источник Поделиться
Комментарии
3 ответа

У вас есть много звонков на $(".заголовок .текст"), который вы можете заменить звонки на поле:

var areaBig = box.height();

Аналогичным образом, вы можете упростить вызовы селекторов в поле, таких как:

// Better than: readmore = $('.header .text a[title*="meer"]')
var readmore = box.find('a[title*="meer"]');

// Better than: $(".header .text").animate(...
box.animate({ height: areaBig }, 1000, "easeInQuart", function () {
box.find("p").css({ visibility: "visible" });
});

Эти изменения не только сделать код более удобным для чтения, но и увеличить скорость выполнения.

2
ответ дан 4 ноября 2011 в 03:11 Источник Поделиться

Я бы:


  • называть высот высотаS (или "ХТ"), а в areaSmall

  • название объект jQuery, чтобы начать с $, и использовать их для элементов я ссылку несколько раз

  • не меняйте названия вещей (заголовок !== заголовок)

  • не создать переменные, которые используются только один раз

  • удалить неиспользуемые переменные (коробка)

Вот еще один взять...

var $header = $('.header'),
$text = $('.text', $header),
$p = $('p', $text),
areaSmallHt = $("h2", $text).height() + $("p:first", $header).height(),
textHt = $text.height();

$text.css({ height: areaSmallHt });

$('a[title*="meer"]', $text).click(function () {
$text.animate({ height: textHt }, 1000, "easeInQuart", function () {
$p.css({ visibility: "visible" });
});
});

$('a[title*="Sluit"]', $text).click(function () {
$text.animate({ height: areaSmallHt }, 1000, "easeOutQuart", function () {
$p.css({ visibility: "hidden" });
$("p:first", $text).css({ visibility: "visible" });
});
});

2
ответ дан 5 ноября 2011 в 05:11 Источник Поделиться

Я не уверен, что вы хотите быть лучше, но, для лучшей удобочитаемости кода и ремонтопригодность я бы сказал, что вы должны заменить все строковые константы с переменными:

var headerClassId = ".header";
var textClassId = ".text";
var aTextValueThatMeansSomething = "easeInQuart";

Сделать то же самое со всеми другими константами:

var aVariableNameThatMeansSomething = 1000;
...
$(headerClassId +" "+textClassId).animate({ height: areaBig },
aVariableNameThatMeansSomething , aTextValueThatMeansSomething, function ...

1
ответ дан 4 ноября 2011 в 02:11 Источник Поделиться

Другие вопросы по теме
Код JavaScript для вращения изображения на веб-странице
3 ноября 2011 в 03:11